CSS - bottom 屬性

CSS bottom 屬性用於設定已定位元素的底部位置。它指定元素底部邊緣與其容器元素底部邊緣之間的距離。position屬性的值決定了bottom屬性的效果。

語法

bottom: auto | length | percentage | initial | inherit;

屬性值

值	描述
auto	讓瀏覽器計算元素的底部邊緣位置。預設值。
長度	以長度單位設定元素的底部邊緣位置（例如 10px、20px 等）。負值有效。
百分比	以容器元素的百分比設定元素的底部邊緣位置（例如 10%、20% 等）。負值有效。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS 邊框屬性示例

以下示例解釋了使用不同值的bottom屬性。

使用絕對定位的 Bottom 屬性

要將bottom屬性與absolute（絕對）位置一起使用，元素必須包含在一個本身已定位的父元素中。然後，元素將相對於父元素進行定位。可以以長度或百分比值（例如 10px、20% 等）或 auto 值指定距父容器邊緣底部的距離。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         position: relative;
         background-color: lightgray;
         height: 400px;
      }
      
      .boxes{
         position: absolute;
         border: 3px solid black;
         padding: 10px;
         width: 20%;
      }
      .box {
         bottom: 150px;
         background-color: lightcoral;
      }
      .box2{
         bottom: 10%;
         background-color: lightgreen;
      }
      .box3{
         bottom: auto;
         background-color: lightblue;
      }
   </style>
</head>

<body>
   <h2>
      CSS bottom property
   </h2>
   <p>
      Position: Absolute, the absolute position
      places the element relative to its positioned
      parent element.
   </p>
   <p>
      For all the boxes, the parent is the grey
      container with 'relative' position, so it
      they have been placed at 10%, 150px and
      auto from the bottom edge of their parent.
   </p>
   <div class="container">
      <div class=" boxes box">
         Position: Absolute, bottom: 150px
      </div>
      <div class=" boxes box2">
         Position: Absolute, bottom: 10%
      </div>
      <div class="boxes box3">
         Position: Absolute, bottom: auto
      </div>
   </div>
</body>

</html>

使用相對定位的 Bottom 屬性

當bottom屬性與relative（相對）位置一起使用時，元素將相對於其正常位置進行定位。可以以長度或百分比值（例如 10px、20% 等）或 auto 值指定距其正常位置底部的距離。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         position: relative;
         background-color: lightgray;
         height: 300px;
      }

      .boxes {
         position: relative;
         border: 3px solid black;
         padding: 10px;
         width: 20%;
      }

      .box {
         bottom: auto;
         background-color: lightcoral;
      }

      .box2 {
         bottom: 55%;
         background-color: lightgreen;
      }

      .box3 {
         bottom: 25px;
         background-color: lightblue;
      }
   </style>
</head>

<body>
   <h2>
      CSS bottom property
   </h2>
   <p>
      Position: Relative, the relative position
      places the element relative to its normal
      position.
   </p>
   <p>
      For all the boxes, the parent is the grey
      container with 'relative' position, so they
      have been placed at 25px, auto and 55% from
      their normal positions.
   </p>
   <br/><br/><br/><br/>
   <div class="container">
      <div class=" boxes box">
         Position: Relative, bottom: auto
      </div>
      <div class=" boxes box2">
         Position: Relative, bottom: 55%
      </div>
      <div class="boxes box3">
         Position: Relative, bottom: 25px
      </div>
   </div>
</body>

</html>

使用固定定位的 Bottom 屬性

fixed（固定）位置將元素放置在特定位置，即使滾動頁面，元素也會保持在該位置。可以以長度或百分比（例如 10px、20% 等）或 auto 值指定元素距底部的距離。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         position: relative;
         background-color: lightgray;
         height: 700px;
      }

      .boxes {
         position: fixed;
         border: 3px solid black;
         padding: 10px;
         width: 20%;
      }

      .box {
         bottom: auto;
         background-color: lightcoral;
      }

      .box2 {
         bottom: 75px;
         background-color: lightgreen;
      }

      .box3 {
         bottom: 2%;
         background-color: lightblue;
      }
   </style>
</head>

<body>
   <h2>
      CSS bottom property
   </h2>
   <p>
      Position: Fixed, the fixed position places
      the element at a fixed position even during
      a scroll.
   </p>
   <p>
      For all the boxes, the parent is the grey
      container with 'relative' position, so they
      have been placed at auto, 75px and 2% from
      the parent's bottom edge.
   </p>
   <div class="container">
      <div class=" boxes box">
      Position: Fixed, bottom: auto
      </div>
      <div class=" boxes box2">
      Position: Fixed, bottom: 75px
      </div>
      <div class="boxes box3">
      Position: Fixed, bottom: 2%
      </div>
   </div>
</body>

</html>

使用粘性定位的 Bottom 屬性

粘性定位使元素在滾動經過指定點時相對於其容器保持固定。使用bottom屬性，我們可以控制距容器底部邊緣的距離。auto、10px 或 10% 等值會相應地調整其粘性行為。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         position: relative;
         background-color: lightgray;
         height: 100vh;
      }

      .boxes {
         position: sticky;
         border: 3px solid black;
         padding: 10px;
         width: 20%;
      }

      .box {
         bottom: auto;
         background-color: lightcoral;
      }

      .box2 {
         bottom: 10px;
         background-color: lightgreen;
      }

      .box3 {
         bottom: 10%;
         background-color: lightblue;
      }
   </style>
</head>

<body>
   <h2>
      CSS Bottom Property with Sticky Position
   </h2>
   <p>
      Position: Sticky, the bottom property affects
      how the element sticks to its container's bottom
      edge.
   </p>
   <p>
      The parent container has a height of 700px,
      so the sticky elements are positioned at auto,
      10px, and 10% from the container's bottom edge.
   </p>
   <div class="container">
      <div class="boxes box">
         Position: Sticky, bottom: auto
      </div>
      <div class="boxes box2">
         Position: Sticky, bottom: 10px
      </div>
      <div class="boxes box3">
         Position: Sticky, bottom: 10%
      </div>
   </div>
</body>

</html>

注意：'static'（靜態）位置不受 top、right、bottom 或 left 屬性的影響。它按元素出現的順序顯示元素。這是元素的預設位置。

支援的瀏覽器

屬性
bottom	1.0	5.0	1.0	1.0	6.0

css_properties_reference.htm

列印頁面