Bố cục CSS - Thuộc tính vị trí
Thuộc tính position
chỉ định loại phương pháp định vị được sử dụng cho một phần tử (tĩnh, tương đối, cố định, tuyệt đối hoặc cố định).
Vị trí Tài sản
Thuộc tính position
chỉ định loại phương pháp định vị được sử dụng cho một phần tử.
Có năm giá trị vị trí khác nhau:
-
static
-
relative
-
fixed
-
absolute
-
sticky
Sau đó, các phần tử được định vị bằng các thuộc tính trên, dưới, trái và phải. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc tính position
được đặt trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị vị trí.
vị trí: tĩnh;
Các phần tử HTML được định vị tĩnh theo mặc định.
Các phần tử được định vị tĩnh không bị ảnh hưởng bởi các thuộc tính trên, dưới, trái và phải.
Một phần tử có position: static;
không được định vị theo bất kỳ cách đặc biệt nào; nó luôn được định vị theo luồng thông thường của trang:
Đây là CSS được sử dụng:
vị trí: tương đối;
Một phần tử có position: relative;
được định vị so với vị trí bình thường của nó.
Việc đặt các thuộc tính trên cùng, bên phải, dưới cùng và bên trái của một phần tử có vị trí tương đối sẽ khiến nó bị điều chỉnh khỏi vị trí bình thường. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng trống nào mà phần tử để lại.
Đây là CSS được sử dụng:
vị trí: cố định;
Một phần tử có position: fixed;
được định vị tương ứng với khung nhìn, có nghĩa là nó luôn ở cùng một vị trí ngay cả khi trang được cuộn. Các thuộc tính trên, phải, dưới và trái được sử dụng để định vị phần tử.
Một phần tử cố định không để lại khoảng trống trên trang nơi nó thường được đặt.
Lưu ý phần tử cố định ở góc dưới bên phải của trang. Đây là CSS được sử dụng:
Ví dụ
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
Hãy tự mình thử » position: fixed;
vị trí: tuyệt đối;
Một phần tử có position: absolute;
được định vị tương đối với tổ tiên được định vị gần nhất (thay vì được định vị tương đối với khung nhìn, như cố định).
Tuy nhiên; nếu một phần tử được định vị tuyệt đối không có tổ tiên được định vị, nó sẽ sử dụng nội dung tài liệu và di chuyển cùng với việc cuộn trang.
Lưu ý: Các phần tử được định vị tuyệt đối sẽ bị xóa khỏi luồng thông thường và có thể chồng lên các phần tử.
Đây là một ví dụ đơn giản:
Đây là CSS được sử dụng:
Ví dụ
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;
}
Hãy tự mình thử »vị trí: dính;
Một phần tử có position: sticky;
được định vị dựa trên vị trí cuộn của người dùng.
Phần tử cố định chuyển đổi giữa relative
và fixed
, tùy thuộc vào vị trí cuộn. Nó được định vị tương đối cho đến khi gặp một vị trí bù nhất định trong khung nhìn - sau đó nó "cố định" tại chỗ (như vị trí: cố định).
Lưu ý: Internet Explorer không hỗ trợ định vị cố định. Safari yêu cầu tiền tố -webkit- (xem ví dụ bên dưới). Bạn cũng phải chỉ định ít nhất một trong top
, right
, bottom
hoặc left
để định vị cố định hoạt động.
Trong ví dụ này, phần tử cố định sẽ bám vào đầu trang ( top: 0
), khi bạn đến vị trí cuộn của nó.
Ví dụ
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Hãy tự mình thử »Định vị văn bản trong hình ảnh
Cách định vị văn bản trên hình ảnh:
Ví dụ
Hãy tự mình thử:
Trên cùng bên trái » Trên cùng bên phải » Dưới cùng bên trái » Dưới cùng bên phải » Căn giữa »Thêm ví dụ
Đặt hình dạng của một phần tử
Ví dụ này minh họa cách thiết lập hình dạng của một phần tử. Phần tử được cắt thành hình dạng này và được hiển thị.
Tất cả thuộc tính định vị CSS
Property | Description |
---|---|
bottom | Sets the bottom margin edge for a positioned box |
clip | Clips an absolutely positioned element |
left | Sets the left margin edge for a positioned box |
position | Specifies the type of positioning for an element |
right | Sets the right margin edge for a positioned box |
top | Sets the top margin edge for a positioned box |