CSS bottom property
CSS is all about presentation. Discover how CSS bottom property works to transform plain HTML into a premium user experience in the guide below.
The bottom attribute in CSS is employed to determine the vertical position's bottom edge for elements that are vertically positioned. It has no impact on elements that are not positioned. This attribute is part of a group of four offset properties, which also include left, right, and top.
The impact of this attribute varies based on the placement of the associated element, specifically influenced by the setting of the position property. The bottom attribute remains inactive when the position property is defined as static.
Syntax
bottom: auto | length | percentage | initial | inherit;
Property Values
The values assigned to this attribute are specified in the following manner:
auto: This serves as the default setting, enabling the browser to determine the position of the bottom edge through calculations.
The length value specifies the placement of the bottom property in units such as pixels, centimeters, points, and more. Negative values are also permitted.
percentage: This parameter specifies the vertical position of the bottom property as a percentage (%). The calculation is based on the height of the container block of the element. Negative values are also permitted in this context.
It establishes the attribute to its original value.
Inheritance: The property is passed down 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 explore this attribute through a few illustrative instances.
Example
In this instance, there are four div elements positioned absolutely. We are setting the bottom property for each of them. The divs with bottom: initial; and bottom: auto; will overlap due to sharing identical dimensions and default settings.
Here, the size of the bottom attribute is specified in pixels and em units.
<!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>
Output
Example - Using negative values
In this instance, there are four div elements positioned relatively to each other. The bottom property is being utilized with negative values on these elements. In this scenario, the negative lengths for the bottom property are specified in pixels (px) and em units.
<!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>
Output
