Bố cục CSS - Thuộc tính vị trí
Thuộc positiontính 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 positiontính 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:
staticrelativefixedabsolutesticky
Sau đó, các phần tử được định vị bằng cách sử dụng các thuộc tính trên cùng, dưới cùng, 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 position
tính đượ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 cùng, dưới cùng, trái và phải.
Một phần tử với 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 dòng bình thường của trang:
Đây là CSS được sử dụng:
Thí dụ
div.static {
position: static;
border: 3px solid #73AD21;
}
chức vụ: thân nhân;
Một phần tử với position: relative;được định vị so với vị trí bình thường của nó.
Đặt các thuộc tính trên cùng, bên phải, bên dưới 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 của nó. Các 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 do phần tử để lại.
Đây là CSS được sử dụng:
Thí dụ
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
vị trí: cố định;
Phần tử với position: fixed;được định vị so với chế độ xem, 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 cùng, bên phải, bên dưới và bên 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 mà 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:
Thí dụ
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;vị trí: tuyệt đối;
Một phần tử với 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ị liên quan đến chế độ xem, 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 phần thân 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ó vị trí tuyệt đối bị xóa khỏi luồng thông thường và có thể chồng chéo các phần tử.
Đây là một ví dụ đơn giản:
Đây là CSS được sử dụng:
Thí 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;
}
vị trí: dính;
Một phần tử với position: sticky;được định vị dựa trên vị trí cuộn của người dùng.
Một phần tử cố định chuyển đổi giữa relativevà fixed, tùy thuộc vào vị trí cuộn. Nó được định vị tương đối cho đến khi gặp vị trí bù nhất định trong khung nhìn - sau đó nó "dính" đúng vị trí (như vị trí: fixed).
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 số tophoặc để rightđịnh vị cố định hoạt động.bottomleft
Trong ví dụ này, phần tử dính sẽ dính vào đầu trang ( top: 0), khi bạn đến vị trí cuộn của nó.
Thí dụ
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Định vị văn bản trong hình ảnh
Cách định vị văn bản trên hình ảnh:
Thí dụ
Hãy tự mình thử:
Các ví dụ khác
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| 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 |