Photo by Georgie Cobbs on Unsplash
Learn CSS POSITIONING PROPERTY(Relative Static and absolute positions)
The relative
the position value is used to position an element relative to its normal position within the document flow. When an element is given a position: relative
property, it can be moved from its original position by specifying a top, bottom, left, or right value. Other elements on the page will continue to flow as if the positioned element were in its normal position.
The static
value is the default value for the position
property and it means that the element is positioned according to the normal document flow.
The absolute
value positions an element relative to its nearest positioned ancestor element, or to the document body if no ancestor elements are positioned.
The fixed
value positions an element relative to the viewport, which means it will always stay in the same position even if the page is scrolled.
<div class="container">
<div class="box"></div>
</div>
.container { position: relative; }
.box { position: absolute; top: 50px; left: 50px; }
In this example, the .container
element is set to position: relative
, which makes it the "anchor" for the absolutely positioned .box
element. The .box
element is then positioned 50px
from the top and 50px
from the left of the .container
element.