bottom
Specifies the distance of an element from the bottom of its current location if the element itself has position: relative
declared or from the bottom of its nearest ancestor when the ancestor has position: relative
and the element has position: absolute
declared.
Syntax
bottom: <value>;
where <value>
can be one of the following:
- Length value:
20px
- Percentage value:
5%
- Keyword value:
auto
,inherit
Note: If none of the ancestors have position: relative
declared, the absolute positioned element will traverse the DOM until it reaches the
Example 1
Set the position of .box
element 40px
from the bottom of the nearest relative position ancestor or from the document if none exist.
.box {height: 100px;width: 100px;background-color: blue;position: absolute;bottom: 40px;}
Example 2
Set the position of .box
element 40px
from the elements bottom edge.
.box {height: 100px;width: 100px;background-color: blue;position: relative;bottom: 40px;}