Vị trí các phần tử
Các thuộc tính CSS về vị trí phần tự giúp định vị phần tử trong trang, nó cũng sắp xếp phần tử này sau phần tử khác, và chỉ cách ứng xử khi nội dung phần tử quá lớn.
Các phần tử định vị bằng cách sử dụng thuộc tính: top
bottom
left
right
Tất nhiên các thuộc tính này không làm việc nếu thuộc tính position
không thiết lập trước đó.
position:static
Các phần tử đều nhận giá trị mặc định là static
, giá trị này cho biết vị trí phần tử tuân theo luồng thứ tự trong trang. Khi phần tử có thuộc tính position:static
thì
các thuộc tính top
bottom
left
right
không có ảnh hưởng
<style> p.position_static { position:static; top: 30px; right: 5px; color: red; } </style> <div class="card"> <p>Paragraph with no position.</p> <p>Paragraph with no position.</p> <p class="position_static">This paragraph has a static position.</p> </div>
Paragraph with no position.
Paragraph with no position.
This paragraph has a static position.
Bạn thấy ví dụ trên khi là static
thì top, right không có tác dụng.
position: fixed
Vị trí phần tử nếu thiết lập là fixed
thì nó định vị dựa vào cửa sổ trình duyệt, và không thay đổi kể cả khi bạn cuộn trang.
top
bottom
left
right
thiết lập khoảng cách về phần tử tới các cạnh cửa sổ trình duyệt.
<style> p.position_fixed { position: fixed; top: 30px; right: 5px; color: red; } </style> <p class="position_fixed">Ví dụ về fixed</p>
Ví dụ về fixed
position: relative
Một phần tử thiết lập vị trí là relative
thì nó có vị trí tương đối. Thuộc tính top
bottom
left
right
chỉ ra khoảng cách dịch chuyển khi dựng: Nội dung của phần tử có thể di chuyển và có thể đè nên phần tử khác, nhưng không gian dành cho phần tử lúc đầu vẫn được giữ nguyên.
<style> .relativetest p { width: 350px; border: 1px black solid; } .relativetest p span { background: green; color:white; position: relative; top: 50px; left: 50px; } </style> <div class="relativetest"> <p><span>CSS Selector</span> dùng để xác định đoạn mã <span>CSS</span> tương ứng được bao trong phần từ <span>{ đến }</span> sẽ được áp dụng cho những thành phần nào trong trang Web.</p> </div>
CSS Selector dùng để xác định đoạn mã CSS tương ứng được bao trong phần từ { đến } sẽ được áp dụng cho những thành phần nào trong trang Web.
Nhớ là giá trị này không sử dụng cho table cells, columns, column groups, rows, row groups, or captions
position: absolute
Thiết lập vị trí dạng absolute thì nó định vị tương đối với phần tử cha đầu tiên có dạng khác static
. Kiểu absolute loại bỏ luồng theo cách bình thường.