Định vị phần tử với CSS bằng thuộc tính position
Thuộc tính position được dùng để thiết lập định vị vị trí của phần tử trong trang. Sử dụng thuộc tính này giúp bạn chọn tùy chọn cách thức xác định vị trí của phần tử trong luồng trình bày, bạn có thay đổi như như vị trí phần tử có liên hệ tương đối với phần tử khác hay vị trí liên quan đến khung nhìn (viewport) ...
Mặc định các phần tử có giá trị mặc định để định vị là vị trí tĩnh trên trang, đây là cách xác định vị trị theo luồng mặc định ở trên trang. Khi một phần tử được định vị khác với mặc định (gọi là phần tử được định vị) thì thuộc tính position của nó thay đổi từ giá trị mặc định static sang một trong các giá trị. relative, absolute, fixed, sticky
Khi phần tử có xác định vị trí (thuộc tính position khắc mặc định static), lập tức lúc này vị trí của phần tử được xác định cần căn cứ vào thuộc tính xác định các khoảng dịch (độ lệch) top, left, right, bottom (những thuộc tính này không có tác dụng khi phần tử định vị mặc định static)
Cú pháp sử dụng thuộc tính positon css
position: static | relative | absolute | sticky | fixed
position có giá trị relative
Vị trí của box (hình hộp) phần tử đầu tiên được tính toán theo luồng dàn phần tử mặc định. Sau đó hình hộp được bù (lệch đi) so với vị trí ở luồng mặc định (căn cứ vào giá trị top, left, right hoặc bottom), mặc dù bị dịch đi như vậy nhưng nó không ảnh hưởng tới các phần tử khác trong luồng mặc định.
Hãy xem vị trí các phần tử trong luồng thông thường
<style>
.ex-container {
border: 2px dotted red;
padding: 5px;
height: 100px;
font-size: 0; /* xóa không gian giữa các inline block */
}
.element1, .element2, .element3 {
display: inline-block;
border: 2px dotted green;
padding: 5px;
font-size: 16px;
}
</style>
<div class="ex-container">
<div class="element1">
ĐÂY LÀ PHẦN TỬ 1
</div>
<div class="element2">
ĐÂY LÀ PHẦN TỬ 2
</div>
<div class="element3">
ĐÂY LÀ PHẦN TỬ 3
</div>
</div>
Kết quả trên là vị trí các phần tử trong luồng bố trí phần tử thông thường.
Bây giờ nếu bạn cho phần tử 2 có positon là relative (nếu không thay đổi top, left, right, bottom thì không ảnh hưởng gì), đồng thời có left giá trị 50px (cạnh trái bị lệch sang phải 50px) và top giá trị -60px (cạnh trên bị lệch lên trên 60px).
<style>
.pos_relative {
position: relative;
left: 50px; /* cạnh trái lệch 50 */
top: -60px; /* cạnh trên lệch lên 60px */
}
</style>
<div class="ex-container">
<div class="element1">
ĐÂY LÀ PHẦN TỬ 1
</div>
<div class="element2 pos_relative">
ĐÂY LÀ PHẦN TỬ 2
</div>
<div class="element3">
ĐÂY LÀ PHẦN TỬ 3
</div>
</div>
Phần tử thứ hai đã rời vị trí ở luồng mặc định của nó, cạnh trái của nó dịch đi 50px và cạnh trên dịch lên 60, kích thước của nó vẫn như khi ở luồng mặc định, vì vị trí chiếm chỗ trong luồng mặc định vẫn còn nguyên (không ảnh hưởng tới phần tử khác trong luồng).
position có giá trị absolute
Định vị tuyệt đối. Phần tử này bị tách ra khỏi luồng dàn phần tử thông thường của trình duyệt (trong luồng thông thường coi như không có phần tử này). Vị trí của box (hộp phần tử) và có thể là kích thước phần tử nữa hoàn được xác định bởi các thuộc tính top, left, right, bottom những vị trí lệch offset với phần tử chứa (hoặc tổ tiên gần nhất) có thuộc tính postion là relative. Những thuộc tính này là độ lệch cạnh phần tử tương ứng với cạnh phần tử chứa. Ví dụ left : 0px thì cạnh trái trùng cạnh trái phần tử chứa, right: 20px thì cạnh phải cách cạnh phải (khoảng bù) phần tử chứa 20px.
<style>
.pos_absolute {
position: absolute;
right: 20px; /* cạnh phải cách cạnh phải cha relative 20px */
left: 50%; /* cạnh trái ở giữa phần tử cha (có relative) */
top: -20px; /* cạnh trên trùng cạnh trên của phần tử chứa */
bottom:20px; /* cạnh dưới cách cạnh dưới phần tử cha 20px */
}
</style>
<div class="ex-container" style="position: relative">
<div class="element1">
ĐÂY LÀ PHẦN TỬ 1
</div>
<div class="element2 pos_absolute">
ĐÂY LÀ PHẦN TỬ 2
</div>
<div class="element3">
ĐÂY LÀ PHẦN TỬ 3
</div>
</div>
Trình duyệt dựng phần tử 1 và 3 trong luồng coi như không có phần tử 3.
Định vị tuyệt đối ở đây là phần tử bị tách khỏi luồng mặc định, vị trí và kích thước của nó xác định bởi top, left, right, bottom và so sánh với phần tử cha (tổ tiên gần nhất) có thuộc tính position là relative. Nếu ngược hết DOM không có phần tử tổ tiên nào có postion relative thì vị trí là tương ứng với cửa sổ trình duyệt.
position có giá trị fixed
Ý nghĩa tương tự như khi nhận absolute - phần tử cũng bị tách khỏi luồng dàn phần tử thông thường của trình duyệt, tuy nhiên vị trí xác định liên hệ với viewport (cửa sổ nhìn hiện tại của trình duyệt, chứ không phải phần tử chứa), điều này làm cho vị trí phần tử luôn cố định dù bạn cuộn trình duyệt.
<style>
.pos_fixed {
position: fixed;
top: 20px;
right: 20px;
background: #9c27b0;
color: white;
}
</style>
<div class="ex-container">
<div class="element1">
ĐÂY LÀ PHẦN TỬ 1
</div>
<div class="element2 pos_fixed">
ĐÂY LÀ PHẦN TỬ 2 (FIXED)
</div>
<div class="element3">
ĐÂY LÀ PHẦN TỬ 3
</div>
</div>
Phần tử 2 trường hợp này có màu nền tím, đã tách khỏi luồng và luôn cố định ở góc trên phải cửa sổ trình duyệt
position có giá trị sticky
Trường hợp này là lai giữa relative và fixed. Ví dụ, một giá trị cố định là 50px, nếu vị trí trong viewport (top) trên 50px thì nó ứng sử như relative, nếu nhỏ hơn thì nó sẽ giữ cố định là 50px. Ví dụ:
<style>
.pos_sticky {
position: sticky;
top: 50px;
}
</style>
<div class="ex-container" style="overflow-y: scroll; height: 300px; font-size: 16px">
<p>Nội dung</p>
<p>Nội dung</p>
<p>Nội dung</p>
<p>Nội dung</p>
<div class="element1">
ĐÂY LÀ PHẦN TỬ 1
</div>
<div class="element2 pos_sticky">
ĐÂY LÀ PHẦN TỬ 2 (STICKY)
</div>
<div class="element3" style="height: 200px">
ĐÂY LÀ PHẦN TỬ 3
</div>
<p>Nội dung</p>
<p>Nội dung</p>
<p>Nội dung</p>
<p>Nội dung</p>
</div>
Nội dung
Nội dung
Nội dung
Nội dung
Nội dung
Nội dung
Nội dung
Nội dung
Bạn hãy cuộn nội nội dung của phần tử
