The bottom
CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.
The effect of bottom
depends on how the element is positioned (i.e., the value of the position
property):
position
is set to absolute
or fixed
, the bottom
property specifies the distance between the element's bottom edge and the bottom edge of its containing block.position
is set to relative
, the bottom
property specifies the distance the element's bottom edge is moved above its normal position.position
is set to sticky
, the bottom
property behaves like its position
is relative
when the element is inside the viewport, and like its position
is fixed
when it is outside.position
is set to static
, the bottom
property has no effect.When both top
and bottom
are specified, and height
is unspecified or either auto
or 100%
, both the top
and bottom
distances are respected. In all other situations, if height
is constrained in any way, the top
property takes precedence and the bottom
property is ignored.
/* <length> values */ bottom: 3px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /* Keyword value */ bottom: auto; /* Global values */ bottom: inherit; bottom: initial; bottom: unset;
<length>
<length>
that represents: <percentage>
<percentage>
of the containing block's height.auto
top
property, while height: auto
is treated as a height based on the content; or if top
is also auto
, the element is positioned where it should vertically be positioned if it were a static element.top
property; or if top
is also auto
, the element is not moved vertically at all.inherit
<length>
, <percentage>
, or the auto
keyword.<length> | <percentage> | auto
This example demonstrates the difference in behavior of the bottom
property, when position
is absolute
versus fixed
.
<p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>Fixed</p></div> <div class="absolute"><p>Absolute</p></div>
p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; }
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'bottom' in that specification. | Working Draft | Defines bottom as animatable. |
CSS Positioned Layout Module Level 3 The definition of 'bottom' in that specification. | Working Draft | Adds behavior for sticky positioning. |
CSS Level 2 (Revision 1) The definition of 'bottom' in that specification. | Recommendation | Initial definition. |
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Percentages | refer to the height of the containing block |
Media | visual |
Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
|
Animation type | a length, percentage or calc(); |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 5
|
6 | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/bottom