CSS Bottom Property

Summary: The CSS bottom property specifies the position of an element’s bottom edge. CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of web pages written in HTML and XML. CSS uses selectors, which identify what elements they are styling, to specify formatting for those elements such as color, size, typeface, or spacing. The CSS bottom property can be applied to any HTML element that has a display value of either block or inline-block.

CSS Bottom Syntax:

The syntax for the bottom is similar to other properties using a colon following by two values separated with spaces that represent the bottom positioning respectively.

Syntax:

Bottom:value;

Example:

"bottom: 10px"

This would set the bottom at a value of ten pixels from the bottom.

Note: Bottom elements depend on their positioning relative to other content for maximum effectiveness and can be used strategically wherever needed: in headers, footers, sidebars… anywhere!

Example:


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

div {
  width: 48%;
  text-align: center;
  background: rgba(55,55,55,.2);
  border: 1px solid blue;
}

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

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
<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>

Parameters or Arguments:

The bottom property takes a value and can be set to any number, px (pixels). However, it is best practice to use either one unit or multiple units with no spaces separating them when using the bottom property.

bottom: fixed number | Initial | inherit | auto

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 300px;
        width: 80%;
        border: 3px solid #8ebf42;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        bottom: 10px;
        border: 3px solid #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Bottom property example</h2>
    <div class="parent">
      The position of this div is set to relative.
      <div class="absolute">This div has a pink background and is placed 10 pixels up from the bottom of its container. It's position was set to absolute in order for it to be fixed on top of everything else so that only this content can be seen as you scroll down.</div>
    </div>
  </body>
</html>

Example 2: With all position

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 180px;
        border: 3px solid #8AC007;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        bottom: 20px;
        border: 3px solid #8AC007;
      }
      div.relative {
        position: relative;
        width: 50%;
        bottom: 2px;
        border: 3px solid #8AC007;
      }
      div.fixed {
        position: fixed;
        width: 50%;
        bottom: 50px;
        border: 3px solid #8AC007;
      }
      div.sticky {
        position: sticky;
        width: 50%;
        bottom: 10px;
        border: 3px solid #8AC007;
      }
    </style>
  </head>
  <body>
    <h2>CSS Bottom property example</h2>
    <div class="parent">
      position: relative.
      <div class="absolute"><strong>position: absolute and bottom 20px</strong>
        <br>The div's bottom edge is placed 20 pixels above the container.</div>
    </div>
    <br>
    <div class="parent">
      position: relative.
      <div class="relative"><strong>position: relative and bottom 2px</strong>
        <br>The div is positioned 2 pixels below its normal position.</div>
    </div>
    <br>
    <div class="fixed"><strong>position: fixed and bottom 50px</strong>
      <br>You can put this div 50 pixels from the bottom of your viewport.</div>
    <div class="parent">
      This div element has position: relative.
      <div class="sticky"><strong>position: sticky and bottom 10px</strong>
        <br>This div is sticky.</div>
    </div>
  </body>
</html>

Browser Compatibility:

The bottom property works with all CSS-compatible browsers, including Google Chrome and Mozilla Firefox. The CSS bottom property is not supported in Internet Explorer versions lower than version 11. As of this writing, the CSS Bottom Property has a Wider support base that spans across both desktop and mobile.

Conclusion:

The Bottom CSS property is a relatively new addition to the CSS language. It provides one of two values that changes how much space there will be between an object and the bottom edge of its container, either padding or margin. This article has taught you about this powerful new tool in your web design arsenal for making websites more usable without taking up too much valuable screen real estate. We hope it’s been useful! If I missed anything please let me know by commenting on my blog post below!

Also read: How to Hide Scrollbar CSS

Follow us on Facebook

Leave a Comment