Thuộc tính position chỉ định loại phương thức định vị được sử dụng cho một phần tử nào đó (static, relative, fixes hoặc absolute).

Thuộc tính position

Thuộc tính position chỉ định loại phương thức định vị sẽ áp dụng cho một phần tử.
Có bốn giá trị nhau cho thuộc tính này:
·         static
·         relative
·         fixed
·         absolute
Các phần tử sau đó được định vị bằng cách sử dụng các thuộc tính top, bottom, left, và right. Tuy nhiên, các thuộc tính này sẽ không làm việc trừ khi thuộc tính position được thiết lập trước. Chúng cũng làm việc khác nhau tùy thuộc vào giá trị của position.


position: static;

Các phần tử HTML mặc định được định vị là "static".
Các phần tử được định vị static (tĩnh) không bị ảnh hưởng bởi các thuộc tính top, bottom, left và right.
Một phần tử với position: static; không được định vị theo bất cứ cách nào đặc biệt; nó luôn luôn được định vị theo luồng (flow) bình thường của trang:
Phần tử <div> này có position là: static;
Đây là mã CSS được sử dụng:
div.static {
position: static;
border: 3px solid #73AD21;
}


position: relative;

Một phần tử với position: relative; được định vị tương đối so với vị trí bình thường của nó.
Thiết lập cho các thuộc tính top, right, bottom, và left cho một phần tử được định vị tương đối (relative) là nguyên nhân khiến nó bị điều chỉnh ra khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh khớp với bất kỳ khoảng cách nào còn lại của phần tử.
Phần tử <div> này có position là: relative;
Đây là mã CSS được sử dụng:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}


position: fixed;

Một phần tử với position: fixed; được định vị tương đối so với chế độ xem (viewport), có nghĩa là nó luôn luôn ở cùng một vị trí ngay cả khi trang được cuộn. Các thuộc tính top, right, bottom và left được sử dụng để định vị phần tử.
Một phần tử cố định (fixed) không để lại một khoảng trống trong trang nơi nó thường được định vị.
Lưu ý phần tử cố định ở góc dưới bên phải của trang. Đây là mã CSS được sử dụng:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
This <div> element has position: fixed;


position: absolute;

Một phần tử với position: absolute; được định vị tương đối với phần tử "tổ tiên" gần nhất (thay vì định vị tương đối so với chế độ xem, giống như fixed).
Tuy nhiên; Nếu một phần tử được định vị tuyệt đối (absolute) không có các phần tử "tổ tiên" được định vị, nó sử dụng phần tử <body>, và di chuyển cùng với di chuyển của trang.
Lưu ý: Một phần tử "được định vị" là một phần tử mà vị trí của nó là bất cứ đâu ngoại trừ static.
Dưới đây là một ví dụ đơn giản:
Phần tử <div> này có position: relative;
Phần tử <div> này có position: absolute;
Đây là mã CSS được sử dụng:
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}


Các phần tử chồng lấn (overlapping)

Khi các phần tử được định vị, chúng có thể chồng lấn các phần tử khác.
Thuộc tính z-index chỉ định bộ thứ tự chồng lên nhau của một phần tử (phần tử cần được đặt ở phía trước, hoặc phía sau, phần tử khác).
Một phần tử có thể có thứ tự xếp chồng là âm hoặc dương:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Một phần tử với thứ tự xếp chồng lớn hơn luôn luôn ở phía trước của một phần tử với thứ tự xếp chống thấp hơn.


Ví dụ khác

Ví dụ này cho thấy cách thiết lập hình dạng của một phần tử. Các phần tử được cắt bớt thành hình dạng này, và được hiển thị.
Ví dụ này cho thấy cách thiết lập thuộc tính overflow để tạo ra một thanh cuộn khi nội dung của một phần tử là quá lớn để phù hợp trong một khu vực được chỉ định.
Ví dụ này cho thấy cách thiết lập trình duyệt tự động xử lý overflow (tràn).
Ví dụ này cho thấy cách thay đổi con trỏ.


Tự làm bài tập!


Tất cả các thuộc tính CSS về định vị

Thuộc tính
Mô tả
Thiết lập lề (margin) dưới cùng cho một hộp
Cắt bớt một phần tử được định vị tuyệt đối (absolute)
Chỉ định hình dạng con trỏ trỏ sẽ được hiển thị
Thiết lập lề (margin) trái cho một hộp được định vị.
Chỉ định những gì sẽ xảy ra nếu nội dung tràn ra khỏi của hộp (box) của mộ
Chỉ định những sẽ thực hiện với các cạnh trái/phải của nội dung nếu nó tràn chứa nội dung của phần tử
Chỉ định những gì sẽ thực hiện với các cạnh trên/dưới cùng của nội dung nế vùng chứa nội dung của phần tử
Chỉ định loại vị trí cho một phần tử
Thiết lập lề (margin) phải cho một hộp được định vị
Thiết lập lề (margin) trên cho một hộp được định vị
Thiết lập thứ tự xếp chồng nhau của một phần tử

CodeLean.vn
Facebook: CodeLean Community

Post a Comment

Mới hơn Cũ hơn