bottom

試一試

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

bottom 的效果取決於元素的定位方式（即 position 屬性的值）。

• 當 position 設定為 absolute 或 fixed 時，bottom 屬性指定了元素底部外邊距的外邊緣與包含塊底部內邊距的外邊緣之間的距離。如果是在錨點定位元素中，並且在值中使用了 anchor() 函式，那麼它是相對於指定 <anchor-side> 邊緣的位置。bottom 屬性與 top、bottom、start、end、self-start、self-end、center 和 <percentage> 值是相容的。
• 當 position 設定為 relative 時，bottom 屬性指定了元素底部邊緣相對於其正常位置向上移動的距離。
• 當 position 設定為 sticky 時，bottom 屬性用於計算粘性約束矩形。
• 當 position 設定為 static 時，bottom 屬性沒有效果。

當同時指定了 top 和 bottom，並且 position 設定為 absolute 或 fixed，並且 height 未指定（即 auto 或 100%）時，top 和 bottom 的距離都將被遵守。在所有其他情況下，如果 height 以任何方式受到約束，或者 position 設定為 relative，則 top 屬性優先，bottom 屬性將被忽略。

語法

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

/* <percentage>s of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

/* Global values */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

值

<length>

負值、零值或正值 <length>

• 對於絕對定位元素，它表示到包含塊底部邊緣的距離。
• 對於相對定位元素，它表示元素相對於其正常位置向上移動的距離。
• 對於錨點定位元素，anchor() 函式解析為一個<length> 值，該值相對於關聯的錨點元素的頂部或底部邊緣的位置（參見將嵌入屬性與 anchor() 函式值一起使用），而 anchor-size() 函式解析為一個<length> 值，該值相對於關聯的錨點元素的寬度或高度（參見根據錨點大小設定元素位置）。

<percentage>

包含塊高度的<percentage>。

auto

指定

• 對於絕對定位元素，元素的位置基於 top 屬性，而 height: auto 被視為基於內容的高度；如果 top 也為 auto，則元素將垂直定位在其作為靜態元素時應有的位置。
• 對於相對定位元素，元素與其正常位置的距離基於 top 屬性；如果 top 也為 auto，則元素根本不會垂直移動。

正式定義

正式語法

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  

示例

絕對定位和固定定位

此示例演示了當 position 為 absolute 與 fixed 時，bottom 屬性行為上的差異。

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

結果

規範

瀏覽器相容性

另見

• top、left 和 right
• inset 簡寫
• inset-block-start、inset-block-end、inset-inline-start 和 inset-inline-end
• inset-block 和 inset-inline 簡寫屬性
• position
• CSS 定位佈局模組