CSS bottom property

The bottom property in CSS is used to specify the bottom position for the vertical positioned elements. It does not affect the non-positioned elements. It is one of the four offset properties that are left, right, and top.

The effect of this property depends on the position of the corresponding element, i.e., the value of the position property. The bottom property does not affect when the position property is set to the value static.

Syntax

Property Values

The values of this property are defined as follows:

auto: This is the default value. It allows the browser to calculate the bottom edge position.

length: This value defines the position of bottom property in px, cm, pt, etc. It allows negative values.

percentage: This value defines the position of bottom property in percentage (%). It is calculated to the height of the element's containing block. It also allows negative values.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

The effects of this property on positioned elements other than the value static are listed as follows:

When the element is fixed or absolutely positioned (i.e., position: fixed; and position: absolute;), the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block (ancestor to which the element is relatively positioned).
If the element is relatively positioned (i.e., position: relative;), the bottom property moves the element's top edge to above/below from its normal position.
If the position is set to sticky, i.e., position: sticky; then, the positioning context is the viewport. When the element is inside the viewport, the bottom property behaves like its position is relative. When the element is outside, the bottom property behaves like its position is fixed.

Now, let's understand this property by using some examples.

Example

In this example, there are four absolutely positioned div elements. We are applying the bottom property to them. The div elements with bottom: initial; and bottom: auto; will overlap because of having similar dimensions and default values.

Here, the length of the bottom property is defined in px and em.

<!DOCTYPE html>
<html>
<head>
<title>
CSS bottom Property
</title>
<style>

div{
position: absolute;
width: 150px;
height: 150px;
font-size: 30px;
}
#len {
bottom: 200px;
border: 5px solid green;
}
#em {
bottom: 1em;
border: 5px solid blue;
}
#auto {
bottom: auto;
border: 5px solid red;
}

#init {
bottom: initial;
border: 5px solid darkviolet;
}
h1{
text-align: center;
}
</style>
</head>

<body>
<h1> Example of the bottom Property </h1>
<div id = "len"> bottom: 200px; </div>
<div id = "em"> bottom: 1em; </div>
<div id = "auto"> bottom: auto; </div>
<div id = "init"> bottom: initial; </div>
</body>
</html>

Test it Now

Output

Example - Using negative values

In this example, there are four relatively positioned div elements. We are applying the bottom property to them with negative values. Here, the negative length values of the bottom property are defined in px and em.

<!DOCTYPE html>
<html>
<head>
<title>
CSS bottom Property
</title>
<style>

div{
position: relative;
width: 150px;
height: 150px;
font-size: 30px;
}
#len {
bottom: -150px;
border: 5px solid green;
}
#em {
bottom: -17em;
border: 5px solid blue;
}
#auto {
bottom: auto;
border: 5px solid red;
}

#init {
bottom: initial;
border: 5px solid darkviolet;
}
h1{
text-align: center;
}
</style>
</head>

<body>
<h1> Example of the bottom Property </h1>
<div id = "len"> bottom: -150px; </div>
<div id = "em"> bottom: -17em; </div>
<div id = "auto"> bottom: auto; </div>
<div id = "init"> bottom: initial; </div>
</body>
</html>

Test it Now

Output