Các top, bottom, left, và rightthuộc tính được sử dụng với vị trí để thiết lập vị trí của một phần tử. Chúng chỉ ảnh hưởng đến các phần tử được định vị, là các phần tử có thuộc positiontính được đặt thành bất kỳ thứ gì khác hơn static. Ví dụ: relative, absolute, fixed, hoặc sticky.
div ( : || || auto || inherit; )Ví dụ: bạn có thể sử dụng nó để di chuyển một biểu tượng vào vị trí:
button .icon ( position: relative; top: 1px; )Hoặc định vị một phần tử đặc biệt bên trong một vùng chứa.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )Giá trị cho top, bottom, left, và rightcó thể là bất kỳ những điều sau đây:
- bất kỳ độ dài hợp lệ nào của CSS
- phần trăm chiều cao của phần tử chứa (cho
topvàbottom) hoặc chiều rộng (choleftvàright) autoinherit
Phần tử sẽ thường di chuyển khỏi một phía nhất định khi giá trị của nó là dương và về phía nó khi giá trị là âm. Trong ví dụ dưới đây, độ dài dương cho topdi chuyển phần tử xuống (ra khỏi đầu) và độ dài âm cho topsẽ di chuyển phần tử lên (về phía trên cùng):
Xem
Đầu bút : giá trị tích cực và tiêu cực của Matsuko Friedland (@missmatsuko)
trên CodePen.
Chức vụ
Các vị trí của một phần tử với một giá trị cho top, bottom, left, hoặc rightphụ thuộc vào giá trị của nó cho position. Hãy xem điều gì sẽ xảy ra khi chúng ta đặt cùng một giá trị cho toptrên các phần tử có các giá trị khác nhau cho position.
static
Các toptài sản không ảnh hưởng đến các yếu tố unpositioned (yếu tố với positioncác thiết lập để static). Đây là cách các phần tử được định vị theo mặc định. Bạn có thể sử dụng position: static;như một phương pháp để hoàn tác tác động của topmột phần tử.
relative
Khi topđược đặt trên một phần tử với positionset to relative, phần tử sẽ di chuyển lên hoặc xuống liên quan đến vị trí ban đầu của nó trong tài liệu.
Xem Bút
đỉnh: tương đối của Matsuko Friedland (@missmatsuko)
trên CodePen.
absolute
Khi topđược đặt trên một phần tử với positionset to absolute, phần tử sẽ di chuyển lên hoặc xuống liên quan đến tổ tiên được định vị gần nhất của nó (hoặc tài liệu, nếu không có tổ tiên được định vị).
Trong bản trình diễn này, hộp màu hồng ở bên trái được định vị 50px từ đầu trang xuống vì nó không có phần tử tổ tiên được định vị. Hộp màu hồng ở bên phải được định vị xuống 50px từ trên cùng của hộp cha mẹ của nó, vì hộp màu hồng có một positiontrong số relative.
Xem Pen
Top: tuyệt đối của Matsuko Friedland (@missmatsuko)
trên CodePen.
fixed
Khi topđược đặt trên một phần tử với positionset to fixed, phần tử sẽ di chuyển lên hoặc xuống liên quan đến khung nhìn của trình duyệt.
Xem phần
Đầu bút : đã được sửa bởi CSS-Tricks (@ css-trick)
trên CodePen.
Thoạt nhìn, có vẻ như không có sự khác biệt giữa absolutevà fixed. Có thể thấy sự khác biệt khi bạn so sánh chúng trên một trang có đủ nội dung để cuộn. Khi bạn cuộn xuống, fixedphần tử vị trí luôn ở trong chế độ xem, trong khi absolutephần tử vị trí sẽ cuộn đi.
Xem Pen
Scrolling: fixed so với tuyệt đối bằng CSS-Tricks (@ css-trick)
trên CodePen.
sticky
Khi topđược đặt trên một phần tử với positionset to sticky, phần tử sẽ di chuyển lên hoặc xuống theo mối quan hệ với tổ tiên gần nhất bằng hộp cuộn (hoặc khung nhìn, nếu không tổ tiên nào có hộp cuộn), giới hạn trong giới hạn của phần tử chứa nó.
Đặt toptrên một stickyphần tử được định vị không có tác dụng gì trừ khi vùng chứa của nó cao hơn và bạn có đủ nội dung để cuộn. Giống như với fixed, phần tử sẽ ở trong chế độ xem khi bạn cuộn. Không giống như fixed, phần tử sẽ nằm ngoài tầm nhìn khi nó đến các cạnh của phần tử chứa nó.
Xem Pen
Scrolling: fixed so với
stick by CSS-Tricks (@ css-trick) trên CodePen.
Gotchas
Đặt các mặt đối diện
Bạn có thể đặt giá trị cho mỗi người trong số top, bottom, left, và righttrên một yếu tố duy nhất. Khi bạn đặt giá trị cho các cạnh đối diện ( topvà bottom, hoặc leftvà right), kết quả có thể không phải lúc nào cũng như bạn mong đợi.
Trong hầu hết các trường hợp, bottomđược bỏ qua nếu topđã được đặt và rightbị bỏ qua nếu leftđã được đặt. Khi hướng được đặt thành rtl(từ phải sang trái), leftthay vào đó sẽ bị bỏ qua right. Để mỗi giá trị có tác dụng, phần tử phải có một positionbộ thành absolutehoặc fixedvà heightđặt thành auto(mặc định).
Trong ví dụ này, chúng ta thiết lập top, bottom, left, và rightcho `20px`, và mong muốn mỗi bên của hộp bên trong là 20px khỏi các cạnh của hộp bên ngoài:
Xem
Cài đặt bút trên cùng, dưới cùng, trái và phải của CSS-Tricks (@ css-trick)
trên CodePen.
Khi cố định không liên quan đến chế độ xem
Các phần tử positionđược đặt thành fixedkhông phải lúc nào cũng được định vị liên quan đến chế độ xem. Nó sẽ được bố trí tương đối so với tổ tiên gần nhất của nó với một transform, perspectivehoặc filterthiết lập tài sản cho bất cứ điều gì khác hơn none, nếu có.
Thêm hoặc xóa không gian
Nếu bạn đã định vị một phần tử và nhận thấy rằng bây giờ có một không gian trống hoặc không đủ không gian như bạn mong đợi, điều đó có thể liên quan đến việc phần tử đó nằm trong hay ngoài luồng của tài liệu.
Khi một phần tử được đưa ra khỏi luồng của tài liệu, điều đó có nghĩa là không gian mà phần tử đó chiếm trên trang ban đầu sẽ biến mất. Đây là trường hợp khi một phần tử được định vị absolutehoặc fixed. Trong ví dụ này, hộp chứa phần tử được định vị tuyệt đối đã bị thu gọn vì phần tử được định vị tuyệt đối đã bị xóa khỏi luồng của tài liệu:
Xem
dòng Tài liệu Bút của Matsuko Friedland (@missmatsuko)
trên CodePen.
Hỗ trợ trình duyệt
Bạn có thể xem qua, nhưng không có mối quan tâm về trình duyệt chéo nào đối với toptài sản. Sử dụng tùy ý.