4.1 absolute positioning
Định vị tuyệt đối (absolute positioning) trong CSS cho phép bạn kiểm soát chính xác vị trí của các phần tử trên trang web. Khi sử dụng định vị tuyệt đối, phần tử được loại khỏi luồng tài liệu bình thường và được đặt tương đối so với tổ tiên gần nhất có định vị. Nếu không có tổ tiên nào như vậy, phần tử sẽ được định vị tương đối so với container gốc (thường là <html> hoặc <body>).
Đặc điểm chính của định vị tuyệt đối:
- Loại khỏi luồng tài liệu: các phần tử được định vị tuyệt đối không ảnh hưởng đến các phần tử khác và không được tính vào khi tính toán kích thước của các phần tử cha.
- Định vị tương đối: các phần tử được đặt tương đối so với tổ tiên gần nhất có định vị tương đối (
position: relative), tuyệt đối (position: absolute), cố định (position: fixed) hoặc dính (position: sticky). - Sử dụng tọa độ: các thuộc tính
top,right,bottomvàleftđược sử dụng để xác định vị trí chính xác của phần tử.
Ví dụ cơ bản về định vị tuyệt đối
Cùng xem qua ví dụ đơn giản về định vị tuyệt đối của một phần tử:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
<div class="container">
<div class="box">Absolute Box</div>
</div>
Trong ví dụ này, phần tử .box được định vị tương đối so với container cha .container, cái có position: relative;.
4.2 Tạo các lớp phủ (overlays)
Định vị tuyệt đối thường được sử dụng để tạo các lớp phủ, chẳng hạn như cửa sổ modal, chú thích nổi và lightboxes.
Ví dụ về định vị tuyệt đối:
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Modal Content</p>
</div>
</div>
</div>
4.3 Bố cục chính xác và các thành phần giao diện
Định vị tuyệt đối hữu ích cho việc tạo ra các bố cục chính xác, như các điều khiển trong trình phát media, các điều khiển người dùng tùy chỉnh và các thanh công cụ.
Ví dụ về định vị tuyệt đối:
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 Tạo bố cục phức tạp
Định vị tuyệt đối cho phép tạo ra các bố cục phức tạp, chẳng hạn như các bảng điều khiển thông tin và các phần tử tương tác.
Ví dụ về định vị tuyệt đối:
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
GO TO FULL VERSION