CSS bottom Property

The bottom property specifies the vertical position of a positioned element.

Positioned elements are positioned as absolute, sticky, etc.

The effect of the bottom setting depends on the position value.

Example

#

The inner element is positioned 40px from the bottom of the container.

<style>
  .relative {
    position: relative;
    width: 400px;
    height: 200px;
    background-color: paleturquoise;
  }

  .absolute {
    position: absolute;
    left: 20px;
    bottom: 40px;
    width: 200px;
    height: 90px;
    background-color: teal;
  }
</style>

<div class="relative">
  <div class="absolute">
  </div>
</div>   

Using bottom

The effect of the bottom setting depends on the position value:

  • fixed or absolute - the bottom position is measured from its containing element.
  • relative - the bottom is measured from its normal bottom position.
  • sticky - the bottom specifies the sticky bottom position relative to the viewport.
  • static - the bottom value has no effect.

The bottom property has no effect on non-positioned elements.

Syntax

bottom: auto | length | initial | inherit;

Values

#

Value Description
auto Default. The browser calculates the bottom position.
length Sets the bottom position with any valid CSS length value. Negative values are allowed.
% Sets the bottom position in % of the containing element. Negative values are allowed
initial Sets the value to its default value.
inherit Inherits the value from its parent.

More Examples

Click the buttons to see the different bottom values.

<style>
  .bottom-relative {
    position: relative;
    width: 350px;
    height: 200px;
    background-color: firebrick;
  }

  .bottom-absolute {
    position: absolute;
    left: 15px;
    bottom: -20px;
    width: 250px;
    height: 90px;
    background-color: orangered;
    transition: bottom 1s ease .2s;
  }
</style>

<div class="bottom-relative">
  <div class="bottom-absolute"></div>
</div>  

Browser support

This table shows when bottom support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
5.5 Jul 2000
Opera
5.0 Dec 2000
Safari
1.0 Jun 2003

You may also like

Guides