top

Try it

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Hiệu lực của top phụ thuộc vào cách phần tử được định vị (tức là, giá trị của thuộc tính position):

• Khi position được đặt thành absolute hoặc fixed, thuộc tính top xác định khoảng cách giữa margin ngoài của cạnh trên phần tử và border trong của cạnh trên khối chứa của nó, hoặc, trong trường hợp phần tử được định vị theo anchor khi hàm anchor() được dùng trong giá trị, tương đối so với cạnh <anchor-side> được chỉ định. Thuộc tính top tương thích với các giá trị top, bottom, start, end, self-start, self-end, center và <percentage>.
• Khi position được đặt thành relative, thuộc tính top xác định khoảng cách cạnh trên của phần tử được dịch chuyển xuống so với vị trí bình thường của nó.
• Khi position được đặt thành sticky, thuộc tính top được dùng để tính toán hình chữ nhật ràng buộc sticky.
• Khi position được đặt thành static, thuộc tính top không có hiệu lực.

Khi cả hai giá trị top và bottom được chỉ định, có ba trường hợp khác nhau:

• Nếu position được đặt thành absolute hoặc fixed và height không được xác định (là auto hoặc 100%), cả hai giá trị top và bottom đều được áp dụng.
• Nếu position được đặt thành relative hoặc height bị giới hạn, thuộc tính top được ưu tiên và thuộc tính bottom bị bỏ qua.
• Nếu position được đặt thành sticky, cả hai giá trị top và bottom đều được xem xét. Điều này có nghĩa là một phần tử sticky có thể di chuyển lên và xuống trong khối chứa của nó dựa trên các giá trị của hai thuộc tính này miễn là hộp vị trí của phần tử vẫn nằm trong khối chứa của nó.

Cú pháp

/* Giá trị <length> */
top: 3px;
top: 2.4em;
top: anchor(bottom);
top: anchor-size(--my-anchor self-block, 10%);

/* <percentage> của chiều cao khối chứa */
top: 10%;

/* Giá trị từ khóa */
top: auto;

/* Giá trị toàn cục */
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;

Giá trị

<length>

Một <length> âm, không hoặc dương:

• đối với phần tử được định vị tuyệt đối, nó biểu thị khoảng cách đến cạnh trên của khối chứa.
• đối với phần tử được định vị theo anchor, hàm anchor() phân giải thành giá trị <length> tương đối so với vị trí của cạnh trên hoặc cạnh dưới của phần tử anchor liên kết (xem Sử dụng thuộc tính inset với giá trị hàm anchor()), và hàm anchor-size() phân giải thành giá trị <length> tương đối so với chiều rộng hoặc chiều cao của phần tử anchor liên kết (xem Đặt vị trí phần tử dựa trên kích thước anchor).
• đối với phần tử được định vị tương đối, nó biểu thị khoảng cách phần tử được dịch chuyển xuống so với vị trí bình thường của nó.

<percentage>

Một <percentage> của chiều cao khối chứa.

auto

Xác định rằng:

• đối với phần tử được định vị tuyệt đối, vị trí của phần tử dựa trên thuộc tính bottom, trong khi height: auto được xử lý như chiều cao dựa trên nội dung; hoặc nếu bottom cũng là auto, phần tử được định vị theo chiều dọc như khi nó là phần tử tĩnh.
• đối với phần tử được định vị tương đối, khoảng cách của phần tử từ vị trí bình thường của nó dựa trên thuộc tính bottom; hoặc nếu bottom cũng là auto, phần tử không bị dịch chuyển theo chiều dọc.

Định nghĩa chính thức

Cú pháp chính thức

top = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

Ví dụ

Phần tử được định vị cách 10% từ trên

body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

<div>The size of this content is determined by the position of its edges.</div>

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• bottom, left và right
• Viết tắt inset
• inset-block-start, inset-block-end, inset-inline-start và inset-inline-end
• Viết tắt inset-block và inset-inline
• position
• Mô-đun CSS positioned layout