CSS - top Property
The top CSS property is used to specify the vertical position of an element relative to its containing element when the position property is set to absolute, fixed, relative, or sticky.
Note: The top property only works if the position property is set to a value other than static (which is the default value).
Based on the value of the position property, the effect of top property is determined.
Position Value | Bottom Property |
---|---|
absolute or fixed | Specifies the distance between element's top edge's outer margin and the inner border of the container's top edge. |
relative | Specifies the distance the element's top edge is moved below its normal position. |
sticky | Used to compute the sticky-constraint rectangle. |
static | No effect on the element's position. |
Both top and bottom values are respected, when both top and bottom values are specified, position is set to absolute or fixed , and height is either 100% or auto.
The top value takes precedence and the bottom value is ignored, when height is constrained or position is set to relative.
Possible Values
<length> − Can specify a negative, null or positive value.
<percentage> − Percentage of the container's height.
auto − Default value. Browser calculates the bottom position.
Applies To
All the HTML positioned element.
DOM Syntax
object.style.top = "20px";
CSS top - Absolute Position
Here is an example where we set position:absolute and different top property values (auto,percent,length) −
<html> <head> <style> div { position: absolute; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:absolute top:auto</div> <div class="percent">Position:absolute top:30%</div> <div class="length">Position:absolute top:3inches</div> </body> </html>
CSS top - Relative Position
Here is an example where position:relative and different top property values (auto,percent,length) −
<html> <head> <style> div { position: relative; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:relative top:auto</div> <div class="percent">Position:relative top:30%</div> <div class="length">Position:relative top:3inches</div> </body> </html>
CSS top - Fixed Position
Here is an example where we set position:fixed and different top property values (auto,percent,length) −
<html> <head> <style> div { position: fixed; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:fixed top:auto</div> <div class="percent">Position:fixed top:30%</div> <div class="length">Position:fixed top:3inches</div> </body> </html>
CSS top - Sticky Position
Here is an example where position:sticky and different top property values (auto,percent,length) −
<html> <head> <style> div { position: sticky; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:sticky top:auto</div> <div class="percent">Position:sticky top:30%</div> <div class="length">Position:sticky top:3inches</div> </body> </html>
CSS top - Static Position
Here is an example where position:static and different top property values (auto,percent,length) −
<html> <head> <style> div { position: static; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { bottom:auto; background-color: yellow; } div.percent { bottom:30%; background-color: pink; } div.length { bottom:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:static top:auto</div> <div class="percent">Position:static top:30%</div> <div class="length">Position:static top:3inches</div> </body> </html>
To Continue Learning Please Login
Login with Google