top
Specifies the distance from the top edge of the reference position. This 'top' property is only applied when the 'position' property is set to a value other than 'static'.
Sample Code
div.test { top: auto;}
div.test1 { top: 50px;}
div.test2 { top: 10%;}
Available Values
| Value | Description |
|---|---|
| auto | Positions the element based on the value calculated from the 'bottom' property. If the 'bottom' property is also 'auto', no position change occurs. This is the initial value. |
| number | A numeric value. When the 'position' property is 'relative', this specifies the offset from the top edge of the element's normal position; when 'absolute', it specifies the distance from the top edge of the containing block. Supported units include 'px' and '%'. When '%' is used, the value is relative to the height of the containing block (the element that determines the reference position). |
Browser Display Result
The div elements with the 'top' property below are placed inside a div element (red border) with 'position: relative', which serves as the reference.
<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 50px auto;"> <div style="top: 50px; position: relative; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'top: 50px' and 'position: relative' are specified.</div> </div>
<div style="position: relative; border: solid 1px #f00; width: 300px; margin: 50px auto;"> <div style="top: 50px; position: absolute; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'top: 50px' and 'position: absolute' are specified. The parent element cannot calculate this element's height, so its height becomes '0'.</div> </div>
Browser Compatibility
Chrome1+ ○
Firefox1+ ○
Safari1+ ○
Edge12+ ○
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera6+ ○
5 and earlier ×
iOS Safari1+ ○
Android Browser4.4+ ○3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○※ Version data is based on MDN.
Details
Specifies the distance from the top edge of the reference position. This 'top' property is only applied when the 'position' property is set to a value other than 'static'.
The reference position changes depending on whether the 'position' property is 'relative', 'absolute', or 'fixed'.
When 'position' is 'relative', the 'top' value specifies the distance from the top edge of the element's normal position in the document flow.
When 'position' is 'absolute' or 'fixed', the 'top' value specifies the distance from the top edge of the containing block.
When the value is 'auto', the remaining vertical distance calculated from the 'bottom' property is automatically set as the 'top' value. If both 'top' and 'bottom' are 'auto', no position change occurs. This 'auto' is the initial value.
Note that the 'top' and 'bottom' properties both operate on the y-axis, while the 'left' and 'right' properties both operate on the x-axis. There is no need to specify both at the same time. If both are specified, the 'top' or 'left' property takes priority.
If you find any errors or copyright issues, please contact us.
シェアする