The top
CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.
For absolutely positioned elements (those with position
: absolute
or position
: fixed
), it specifies the distance between the top margin edge of the element and the top edge of its containing block.
For relatively positioned elements (those with position
: relative
), it specifies the amount the element is moved below its normal position.
When both top
and bottom
are specified, as long as height
is unspecified, auto
or 100%
, both top
and bottom
distances will be respected. Otherwise, if height
is constrained in any way, the top
property takes precedence and the bottom
property is ignored.
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 |
/* <length> values */ top: 3px; top: 2.4em; /* <percentages> 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, used as described in the summary.auto
bottom
property and treat height: auto
as a height based on the content.bottom
property, or if bottom
is also auto
, do not offset it at all.inherit
<length>
, <percentage>
or the auto
keyword.<length> | <percentage> | auto
/* The body could be set using px unit also for the div to operate */ body{ width: 100%; height: 100%; } /* The div can now operate the settings with % unit (body w and h are set) */ div { position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; }
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml" /> <title>Mozilla.org height top left width percentage CSS</title> <style type="text/css"> /* The body could be set using px unit also for the div to operate */ body { width: 100%; height: 100%; } /* The div can now operate the settings with % unit (body w and h are set) */ div { position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; } </style> </head> <body> <center> <div> ...Some content... </div> </center> </body> </html>
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'top' in that specification. | Working Draft | Defines top as animatable |
CSS Level 2 (Revision 1) The definition of 'top' in that specification. | Recommendation | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 1.0 (1.7 or earlier) | (Yes)[1] | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | (Yes) | ? | ?[1] | ? | ? |
[1] In Internet Explorer versions before 7.0, when both top
and bottom
are specified, the element position is over-constrained and the top
property has precedence: the computed value of bottom
is set to -top
, while its specified value is ignored.
© 2005–2017 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