Khi xây dựng giao diện web, việc kiểm soát vị trí hiển thị của phần tử là cực kỳ quan trọng. CSS cung cấp thuộc tính position giúp bạn xác định phần tử được đặt ở đâu, di chuyển như thế nào và có "dính" theo khi cuộn trang hay không.
Hiểu rõ cách hoạt động của các giá trị như static, relative, absolute, fixed, sticky sẽ giúp bạn làm chủ bố cục, tạo hiệu ứng chuyên nghiệp và xử lý linh hoạt các tình huống hiển thị phức tạp.
Thuộc tính position
Thuộc tính position xác định cách một phần tử được định vị trên trang, ảnh hưởng đến việc sắp xếp và chồng lớp của các phần tử khác.
Cú pháp cơ bản: position: value.
Các giá trị phổ biến: top, right, bottom, left.
static - vị trí mặc định
Phần tử có position: static nằm trong luồng bố cục thông thường (flow layout) và không thể dịch chuyển bằng top, left, right, bottom.
<style>
.box {
height: 50px;
font-weight: 500;
font-size: 32px;
}
.box-1 {
background-color: orange;
}
.box-2 {
background-color: green;
position: static;
top: 200px; /* không có tác dụng */
}
.box-3 {
background-color: violet;
}
</style>
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2 (static)</div>
<div class="box box-3">Box 3</div>
Kết quả:
Box 2vẫn nằm giữaBox 1vàBox 3- thuộc tínhtopbị bỏ qua.
relative - vị trí tương đối
Phần tử vẫn giữ chỗ trong bố cục, nhưng bạn có thể di chuyển nó tương đối so với vị trí ban đầu bằng top, left, right, bottom.
<style>
.box {
height: 50px;
font-weight: 500;
font-size: 32px;
}
.box-1 {
background-color: orange;
}
.box-2 {
background-color: green;
position: relative;
top: 50px;
left: 30px;
}
.box-3 {
background-color: violet;
}
</style>
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2 (relative)</div>
<div class="box box-3">Box 3</div>
Lưu ý:
Box 2được dịch chuyển nhưng vẫn giữ chỗ trống trong bố cục, phần tử khác không tràn vào.
absolute - vị trí tuyệt đối
Phần tử được định vị tách khỏi luồng bình thường và dựa theo phần tử cha gần nhất có position khác static.
Nếu không có phần tử cha nào định vị, nó sẽ được đặt theo viewport.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: lightblue;
}
.child {
position: absolute;
width: 80px;
height: 80px;
top: 60px;
left: 60px;
background: tomato;
}
</style>
<div class="parent">
<div class="child">Box</div>
</div>
Box(màu đỏ) nằm bên trong khung xanh, được định vị 60px từ trên và 60px từ trái của phần tử cha.parent.
fixed - vị trí cố định
Phần tử với position: fixed luôn nằm cố định tại một vị trí trên màn hình, không di chuyển khi cuộn trang.
Thường dùng cho thanh điều hướng, nút quay về đầu trang, hoặc hộp thoại modal.
<style>
.fixed-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: black;
color: white;
text-align: center;
padding: 12px;
}
body {
height: 1500px;
margin: 0;
}
</style>
<div class="fixed-nav">Thanh điều hướng cố định</div>
Dù cuộn trang đến đâu, thanh màu đen vẫn giữ nguyên vị trí ở trên cùng.
Giá trị sticky - vị trí dính
position: sticky là sự kết hợp giữa relative và fixed:
- Bình thường, phần tử cuộn theo luồng trang.
- Khi đến vị trí xác định (
top,left, v.v.), nó "dính" lại và hoạt động nhưfixed.
<style>
.section {
height: 400px;
background: #f3f3f3;
margin-bottom: 16px;
}
h2 {
background: orange;
position: sticky;
top: 0;
padding: 8px;
}
</style>
<div class="section">
<h2>Tiêu đề chương 1</h2>
<p>Cuộn để thấy tiêu đề "dính" trên cùng...</p>
</div>
<div class="section">
<h2>Tiêu đề chương 2</h2>
<p>Tiêu đề chương 2 sẽ dính khi đến vị trí top = 0.</p>
</div>
Định vị theo thẻ cha gần nhất có thanh cuộn (scrollbar)
z-index - độ ưu tiên lớp hiển thị
Khi các phần tử chồng lên nhau, z-index xác định phần tử nào nằm trên cùng.
Giá trị càng lớn, phần tử càng nổi lên trên.
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.red {
background: red;
z-index: 1;
top: 0;
left: 0;
}
.blue {
background: blue;
z-index: 2;
top: 20px;
left: 20px;
}
</style>
<div class="box red"></div>
<div class="box blue"></div>
Hộp màu xanh có
z-index: 2sẽ hiển thị đè lên hộp đỏ.z-indexchỉ hoạt động khi phần tử có position khác static.
Kết luận
position: giúp kiểm soát cách phần tử hiển thị và di chuyển trên trang.static: mặc định, không định vị.relative: di chuyển so với vị trí ban đầu, vẫn giữ chỗ.absolute: định vị tuyệt đối, tách khỏi luồng bố cục.fixed: cố định theo màn hình, không bị cuộn.sticky: di chuyển đến vị trí nhất định rồi "dính" lại.z-index: xác định thứ tự chồng lớp khi các phần tử trùng nhau.
Khi nắm vững các thuộc tính vị trí trong CSS, bạn có thể xây dựng bố cục linh hoạt, tạo hiệu ứng động và xử lý các tình huống hiển thị phức tạp một cách dễ dàng.
Đây là nền tảng quan trọng để bạn tiến tới các kỹ thuật CSS nâng cao như grid layout, flexbox, tooltip, dropdown hay modal overlay.