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. position: fixed
positions an element relative to the viewport. It takes the element out of the normal flow and remains fixed, not affected by scrolling.
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;}
The blue box position: absolute
is positioned 40px
from the bottom edge of its containing element position: relative
.
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;}
The blue box position: relative
is positioned 40px
above its default position, represented by the dashed box within the containing element position: relative
.
Example 3
Set the position of .box
element 40px
from the bottom edge of the viewport.
.box {height: 100px;width: 100px;background-color: blue;position: fixed;bottom: 40px;}
The blue box position: fixed
is taken out of the normal document flow and its position with the bottom property sets its distance 40px
above the bottom edge of the viewport. It doesn’t move when the page is scrolled.
Contribute to Docs
- 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.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours