bottom
Anonymous contributor
Anonymous contributor3077 total contributions
Anonymous contributor
Published Jul 14, 2021Updated Mar 10, 2023
Contribute to Docs
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;}
All contributors
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total contributions
- KyraThompson67 total contributions
- christian.dinh2481 total contributions
- Anonymous contributor
- robgmerrill
- KyraThompson
- christian.dinh
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.