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
Đăng nhận xét