CSS positioning xác định cách các phần tử được đặt trong trang web. Nó cho phép bạn kiểm soát bố cục, thứ tự xếp chồng và căn chỉnh. Các loại positioning chính trong CSS là:
| Position Property | Description |
|---|---|
| Fixed | Một phần tử có |
| Static | Đây là phương pháp positioning mặc định. Các phần tử có |
| Relative | Các phần tử có position: relative được đặt tương đối so với vị trí ban đầu. Các phần tử khác sẽ không lấp đầy khoảng trống khi nó di chuyển. |
| Absolute | Vị trí được xác định so với tổ tiên gần nhất có |
| Sticky | Kết hợp các tính năng của position: relative và position: fixed. Phần tử hoạt động như position: relative đến khi đạt ngưỡng, sau đó thành position: fixed. |
. Static Positioning
Static là giá trị mặc định của thuộc tính position. Nó không chấp nhận các thuộc tính như top, left, right hoặc bottom.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
</body>
</html>
<!--Driver Code Ends-->
- Các hộp tuân theo luồng tài liệu thông thường.
- Không có sự chồng chéo hoặc thay đổi vị trí của các phần tử.
. Relative Positioning
Relative positioning đặt một phần tử tương đối so với vị trí ban đầu của nó. Bạn có thể di chuyển nó bằng top, left, right hoặc bottom.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.relative {
position: relative;
top: 20px;
left: 30px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>Box 1</div>
<div class="relative">Box 2</div>
</body>
</html>
<!--Driver Code Ends-->
Hộp 2 được dịch chuyển 20px xuống dưới và 30px sang phải từ vị trí ban đầu.
. Absolute Positioning
Absolute positioning loại bỏ phần tử khỏi luồng tài liệu thông thường. Nó đặt nó tương đối so với tổ tiên có positioning context gần nhất. (relative, absolute hoặc fixed).
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.container {
position: relative;
width: 300px;
height: 200px;
border: 2px solid black;
margin: 20px auto;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
background-color: pink;
padding: 10px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<p>Container with Relative Positioning</p>
<div class="absolute">Absolutely Positioned Element</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
- Hộp màu hồng (
.absolute) được định vị 50px xuống dưới và 50px sang phải bên trong.container. - Nó không ảnh hưởng đến các phần tử khác trong luồng.
. Fixed Positioning
Fixed positioning loại bỏ phần tử khỏi luồng và đặt nó tương đối so với viewport. Nó vẫn ở nguyên vị trí ngay cả khi trang cuộn.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightgreen;
padding: 20px;
border: 2px solid black;
}
.content {
height: 1200px;
padding: 10px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>Fixed Positioning Example</h2>
<div class="fixed">Fixed Box</div>
<div class="content">
<p>Scroll down to see that the fixed box stays in place.</p>
<p>This content simulates a long page.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
Phần tử fixed nằm ở góc trên bên phải của viewport ngay cả khi người dùng cuộn trang.
. Sticky Positioning
Sticky positioning chuyển đổi giữa relative và fixed dựa trên vị trí cuộn.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.sticky {
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="sticky">I am sticky</div>
<p>Scroll down to see the effect.</p>
<div style="height: 1000px;"></div>
</body>
</html>
<!--Driver Code Ends-->
Phần tử sticky nằm ở đầu viewport khi bạn cuộn. Nhưng nó chỉ nằm trong phần tử chứa nó.