The top
CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.
The effect of top
depends on how the element is positioned (i.e., the value of the position
property):
position
is set to absolute
or fixed
, the top
property specifies the distance between the element's top edge and the top edge of its containing block. (Containing block needs to have property position: relative
)position
is set to relative
, the top
property specifies the distance the element's top edge is moved below its normal position.position
is set to sticky
, the top
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 top
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 */ top: 3px; top: 2.4em; /* <percentage>s of the height of the containing block */ top: 10%; /* Keyword value */ top: auto; /* Global values */ top: inherit; top: initial; top: unset;
<length>
<length>
that represents: <percentage>
<percentage>
of the containing block's height.auto
bottom
property, while height: auto
is treated as a height based on the content; or if bottom
is also auto
, the element is positioned where it should vertically be positioned if it were a static element.bottom
property; or if bottom
is also auto
, the element is not moved vertically at all.inherit
<length>
, <percentage>
, or the auto
keyword.<length> | <percentage> | auto
body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; }
<div>The size of this content is determined by the position of its edges.</div>
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'top' in that specification. | Working Draft | Defines top as animatable. |
CSS Positioned Layout Module Level 3 The definition of 'top' in that specification. | Working Draft | Adds behavior for sticky positioning. |
CSS Level 2 (Revision 1) The definition of 'top' 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/top