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

打印页面