Top Property
Last updated: 2026-09-13
top Top Property
The top property defines the offset of a positioned element from the top edge of its containing block. It only applies to elements whose position is relative, absolute, fixed, or sticky, and is used to control an element's vertical position precisely.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | positioned |
| Animation Type | length |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
top: auto | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | No offset. |
<length> | <percentage> | Type | An offset value relative to the containing block. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| top | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： top only affects positioned (non-static) elements; setting it on a position:static element has no effect.
Tip： A percentage is computed against the containing block's height; auto lets the browser resolve the position from other properties.
❓ FAQ
QWhat happens when both top and bottom are set?
AIt depends. For absolute or fixed elements without a height, the element stretches to fill the space between top and bottom, giving an adaptive height. With relative positioning, top wins and bottom is ignored. If a height is also set, top wins and bottom is ignored. This behavior is often used to stretch elements vertically inside a parent, such as full-height background layers.
QWhat is the top percentage relative to?
AThe percentage is computed against the containing block's height. For absolute elements the containing block is the padding box of the nearest positioned ancestor; for fixed it is the viewport; for relative it is the element's own original position. So top:50% places the element's top edge at half the containing block's height, often paired with transform:translateY(-50%) for vertical centering, since the transform shifts it by half of its own height.
QWhy isn't top working?
AThe most common reason is that the element is not positioned: top only works on elements with position relative, absolute, fixed, or sticky, and is ignored entirely on static, the default. Also check that the value is valid, that is, auto, length, or percentage, and that it is not overridden by properties such as height. Confirm position first, then verify the offset calculation.
QHow do I center vertically with top:50%?
ASet the element to position:absolute, with the parent position:relative, use top:50% so its top edge lands at the middle of the container, then apply transform:translateY(-50%) to shift it up by half its own height. That is vertical centering. Note that transform moves the element by 50% of its own height, which is different from how top's percentage works, and the two together are needed for true centering regardless of content size.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
position Property
Learn the prerequisites for top to take effect.
bottom (Bottom Offset)
The property that offsets from the bottom edge.
