
The CSS bottom property works on the vertical position of a positioned element. The CSS bottom property has no effect on non-positioned elements.
Syntax:
bottom: auto|length;
auto (default) – lets the browser calculate the bottom edge position.
length – settles the bottom edge position in px, cm, %, etc.
Example:
<!doctype html>
<html>
<head>
<style>
.frame {
border: 3px solid #333;
}
.one, .two, .three {
width: 100px;
height: 50px;
position: relative;
background-color: #e9c46a;
display: inline-block;
}
.one {
bottom: 0px;
}
.two {
bottom:10px;
}
.three {
bottom: -10px;
}
</style>
</head>
<body>
<div class="frame">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>
Output:
1
2
3
Enjoy coding!
Read also: