position Property
Thuộc tính position chỉ định loại phương pháp định vị được sử dụng cho một element.
Có năm giá trị position khác nhau:
- static
- relative
- fixed
- absolute
- sticky
Các element đượ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 hoạt động trừ khi thuộc tính vị trí được đặt trước. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị vị trí.
position: static;
Các phần tử HTML mặc định là position: static;.
Static element không bị ảnh hưởng bởi top, bottom, left, và right.
Một element 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 dòng bình thường của trang:
Đây là css được sử dụng:
div.static { position: static; border: 3px solid blue; }
position: relative;
Một element 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 top, right, bottom, và left của một element có position relative sẽ khiến nó bị điều chỉnh khỏi vị trí bình thường của nó. 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 element để lại.
Đây là css được sử dụng:
div.relative { position: relative; left: 30px; border: 3px solid blue; }
position: fixed;
Một element có position: fixed; được định vị so với viewport, 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 top, right, bottom và left được sử dụng để định vị element.
Một element fixed không để lại khoảng trống trên trang mà nó được đặt.
Đây là css được sử dụng:
div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid blue; }
position: absolute;
Một phần tử có position: absolute; được định vị tương đối với element cha có position khác static gần nhất (thay vì được định vị so với viewport, như fixed).
Tuy nhiên; nếu một element được position: absolute; không có element cha có position, nó sẽ sử dụng body và di chuyển cùng với việc cuộn trang.
Lưu ý: Các element có position absolute bị xóa khỏi luồng thông thường và có thể chồng chéo lên nhau.
Đây là css được sử dụng:
div.relative { position: relative; width: 400px; height: 200px; border: 3px solid blue; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid blue; }
position: sticky;
Một element có position: sticky; được định vị dựa trên vị trí cuộn của người dùng.
Một element sticky 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 một vị trí bù nhất định được đáp ứng trong viewport - sau đó nó "dính" vào vị trí (như vị trí: fixed).
Lưu ý: Internet Explorer không hỗ trợ position sticky. 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.
div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }