top
Moves a positioned element away from the top edge of its reference point.
- Initial value
auto- Inherited
- No
- Animatable
- yes, as a length or percentage
- Applies to
- positioned elements (position other than static)
- JavaScript
element.style.top = "24px"
Example
#.badge {
position: absolute;
top: 8px;
}<div class="stage" style="position: relative; height: 110px;">
<span class="badge box">New</span>
</div>Definition and usage
#The top property only works on elements whose position is something other than static. It says how far from the top edge of the reference point the element should sit.
The reference point depends on the kind of positioning. With relative, the element moves relative to the spot it would normally occupy. With absolute, it’s the nearest positioned ancestor that counts; with fixed, the browser window; and with sticky, the edge of the scrolling container.
Percentage values are calculated from the size of the reference point. If you set both top and bottom on an element with no fixed size, it stretches between both edges.
Syntax
#top: auto | <length> | <percentage>;Values
#Values in practice
#auto
.demo { top: auto; }24px
.demo { top: 24px; }50%
.demo { top: 50%; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- If the offset doesn’t seem to work, check whether the element has
positionset. - To set all four sides at once, use the
insetshorthand.
Related entries
#- positionChooses how an element is positioned: in the flow, relative, absolute, fixed, or sticky.
- insetA shorthand that sets top, right, bottom, and left in a single declaration.
- z-indexDetermines which element sits on top when elements overlap.
- bottomMoves a positioned element away from the bottom edge of its reference point.
Spotted a mistake or missing an example? Write to us.