CSS top property decides the top offset for positioned elements. An element is considered positioned if its position property has value other than static.
CSS property top
| CSS version: | CSS 2.1 |
| Value: | length | percentage | auto | inherit |
| Initial: | auto |
| Applies to: | positioned elements |
| Inherited: | no |
| Percentage: | percentage of height of containing block |
- property top can be applied to positioned elements (fixed, relative, absolute)
- For absolute element the offset is relative to nearest positioned container.
- For relative element the offset is relative to the element’s normal position itself.
- In case value is specified as percentage, it is percentage of containing block width.
- Negative values are ok.
Example – css top property
In the following code, CSS property top can be changed to the following values
- 50px
- 25%
- 0
- -10px
<style type="text/css">
.container {
position: relative;
background-color: gray;
width:150px; height: 100px;
}
.boxwithoffset {
position: absolute;
background-color:lightblue;
width: 80px;
left: 0px; top: 50px;
}
</style>
<div class="container">
<div>regular text</div>
<div class="boxwithoffset">box with top offset</div>
</div>top refresh
