bottom

Try it

bottom: 0;

bottom: 4em;

bottom: 10%;

bottom: 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;
}

Cú pháp

/* Giá trị <length> */
bottom: 3px;
bottom: 2.4em;
bottom: calc(anchor(--my-anchor 50%) + 5px);
bottom: anchor-size(width);

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

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

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

Giá trị

<length>

Giá trị <length> âm, không hoặc dương:

• Đối với phần tử được định vị tuyệt đối, đại diện cho khoảng cách đến cạnh dưới của khối chứa.
• Đối với phần tử được định vị tương đối, đại diện cho khoảng cách mà phần tử được di chuyển lên trên so với vị trí bình thường của nó.
• Đối với phần tử được định vị neo (anchor-positioned), 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 dưới của phần tử neo 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ử neo liên kết (xem Đặt vị trí phần tử dựa trên kích thước neo).

<percentage>

Giá trị <percentage> của chiều cao của khối chứa.

auto

Chỉ đị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 top, trong khi height: auto được xử lý như chiều cao dựa trên nội dung; hoặc nếu top cũng là auto, phần tử được đặt ở vị trí mà nó sẽ ở theo chiều dọc nếu đó 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 dựa trên thuộc tính top; hoặc nếu top cũng là auto, phần tử không bị di chuyển theo chiều dọc.

Mô tả

Hiệu ứng của bottom 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 bottom chỉ định khoảng cách giữa cạnh ngoài của margin dưới của phần tử và cạnh ngoài của padding dưới của khối chứa, hoặc trong trường hợp phần tử được định vị neo khi hàm anchor() được sử dụng trong giá trị, tương đối so với vị trí của cạnh <anchor-side> được chỉ định. Thuộc tính bottom 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 bottom chỉ định khoảng cách mà cạnh dưới của phần tử được di chuyển lên trên so với vị trí bình thường của nó.
• Khi position được đặt thành sticky, thuộc tính bottom đượ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 bottom không có hiệu lực.

Khi cả top và bottom đều được chỉ định, position được đặt thành absolute hoặc fixed, và height không được chỉ định (là auto hoặc 100%), thì cả hai khoảng cách top và bottom đều được tính đến. Trong tất cả các trường hợp khác, nếu height bị ràng buộc bằng bất kỳ cách nào hoặc position được đặt thành relative, thuộc tính top có độ ưu tiên cao hơn và thuộc tính bottom bị bỏ qua.

Định nghĩa hình thức

Cú pháp hình thức

bottom = 
  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ụ

Định vị tuyệt đối và cố định

Ví dụ này minh họa sự khác biệt trong hành vi của thuộc tính bottom khi position là absolute so với fixed.

HTML

<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>

CSS

p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgb(55 55 55 / 20%);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

Kết quả

Thông số kỹ thuật

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

Xem thêm

• top, left, và right
• Viết tắt inset
• inset-block-start, inset-block-end, inset-inline-start, và inset-inline-end
• Các viết tắt inset-block và inset-inline
• position
• Module CSS positioned layout