Nasi wolontariusze nie przetłumaczyli jeszcze tego artykułu na język Polski. Dołącz do nas i pomóż go przetłumaczyć!
Summary
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 |
Animatable | yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* <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;
Values
<length>
- Is a negative, null or positive
<length>
that represents:- for absolutely positioned elements, the distance to the top edge of the containing block;
- for relatively positioned elements, the offset that the element is moved below its position in the normal flow if it wasn't positioned.
<percentage>
- Is a
<percentage>
of the containing block's height, used as described in the summary. auto
- Is a keyword that represents:
- for absolutely positioned elements, the position the element based on the
bottom
property and treatheight: auto
as a height based on the content. - for relatively positioned elements, the offset the element from its original position based on the
bottom
property, or ifbottom
is alsoauto
, do not offset it at all.
- for absolutely positioned elements, the position the element based on the
inherit
- Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a
<length>
,<percentage>
or theauto
keyword.
Formal syntax
<length> | <percentage> | auto
Examples
/* 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://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>
Specifications
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 |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 1.0 (1.7 or earlier) | (Yes)[1] | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ?[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.