CSS - bottom Property

Previous
Quiz

CSS bottom property is used to set the bottom position of a positioned element. It specifies the distance between the bottom edge of the element and the bottom edge of its containing element. Based on the value of the position property, the effect of bottom property, is determined.

Syntax

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

Property Values

ValueDescription
autoIt lets the browser calculate the element's bottom edge position. Default.
lengthIt sets the element's bottom edge position in length units (eg.10px, 20px etc.). Negative value are valid.
percentageIt sets the element's bottom edge position in percentage of containing element(e.g. 10%, 20% etc.). Negative values are valid.
initialIt sets the property to its default value.
inheritIt inherits the property from the parent element.

Examples of CSS Border Property

The following examples explain the bottom property with different values.

Bottom Property with Absolute Position

To use bottom property with absolute position, the element must be contained within a parent which itelf should be positioned. The element will then be placed relative to the parent. The distance from the bottom of the parent container edge can be specified in length or percentage values (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.

Example

<!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 Property with Relative Position

When the bottom property is used with relative position, the element will be placed relative to its normal position. The distance from the bottom of its normal position can be specified in length or percentage values (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.

Example

<!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 Property with Fixed Position

The fixed position places an element at a specific position, the element stays at the position despite scroll. The position of the element from the bottom can be specified in length or percentage (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.

Example

<!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 Property with Sticky Position

The sticky position keeps an element fixed relative to its container when scrolling past a specified point. With the bottom property, we can control the distance from the containers bottom edge. Values like auto, 10px, or 10% adjust its sticking behavior accordingly. This is shown in the following example.

Example

<!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>

Note: The position 'static' is not impacted by properties top, right, bottom or left. It displays the elements in the order they appear. It is the default position for elements.

Supported Browsers

PropertyChromeEdgeFirefoxSafariOpera
bottom1.05.01.01.06.0
css_reference.htm
Print Page
Previous
Next