CSS bottom Property
CSS bottom property is used for setting the vertical position of a positioned element. It merely has no effect on the non-positioned elements. The effect of the bottom property depends on how the element gets positioned.
When both the top and bottom are specified, the position is set to the absolute or fixed and the height is unspecified or auto if both the top and bottom property distances are respected.
In the case of other situations, if the height is constrained in any way or if the position is set to relative, the top property takes precedence and the bottom property gets ignored.
Syntax for bottom property in CSS
Following is the syntax for the bottom property.
bottom: auto|length|initial|inherit;
Example: CSS bottom Property
Here in the example below, we are using the bottom property with different border colors, and their different values. In this case, we have given the bottom value of the object as all the different values of the property. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Bottom property in CSS</title>
<style type="text/css">
p {
font-size: 40px;
line-height: 2em;
}
div {
width: 50%;
text-align: center;
background: rgba(60,80,70,60);
border: 5px solid blue;
}
.absolute {
position: absolute;
bottom: 10px;
left: 10px;
}
.fixed {
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<p>Study Tonight is the best platform for learning digital courses in a simplified way !</p>
<div class="fixed">
<p>Fixed</p>
</div>
<div class="absolute">
<p>Absolute</p>
</div>
</body>
</html>
Output:
Example 2: CSS bottom Property
Here in the example below, we are using the bottom property with different border colours, and their different values. In this case, we have given the bottom value of the object as 'auto'. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Bottom property in CSS</title>
<style type="text/css">
div{
background-color: pink;
}
.border-box{
bottom: auto;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
5 |
5 |
| Opera |
6 |
6 |
| Safari |
1 |
1 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the bottom property in CSS is auto. This property is applicable to the positioned elements. It is not an inherited property. Percentage values refer to the height of the block or the container. The computed value for this property is the absolute length if it is specified as a length, the specified value if it is specified as a percentage or else it is auto.
