revision:
- affects the vertical position of a positioned element. This property has no effect on non-positioned elements.
If {position: absolute;} or {position: fixed;}} : the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
If {position: relative;} : the top property makes the element's top to move above/below its normal position.
If {position: sticky;} : the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
If {position: static;} : the top property has no effect.
Property values:
auto : the browser calculates the top edge position. This is default
length : sets the top edge position in px, cm, etc. Negative values are allowed.
% : sets the top edge position in % of containing element. Negative values are allowed.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div>
<div class="a">
<div class="b">This div element has position: absolute and top: 0.</div>
<div class="c">This div element has position: absolute and is placed 5vw down
from the top edge of the containing positioned element.</div>
</div>
</div>
<style>
div.a {position: relative; width: 25vw; height: 15vw; border: 0.3vw solid red;}
div.b {position: absolute; top: 0; border: 0.3vw solid blue;}
div.c {position: absolute; top: 5vw; border: 0.33vw solid green;}
</style>