Hey Guys,
I spent little more time to learn CSS positions and below is an example you can try to understand.
Try below one :
<div class="parent">
<p style = "position:relative;left:10%;border:2px black solid;"> I am relative </p>
<!-- Occupy the position after above image and align towards left by 10 % . -->
<p style = "position:static;left:10%;border:2px yellow solid;"> I am Static </p>
<!-- Does not affect any change in left property . its static and align to its normal position --> .
<p style = "position:fixed; left:10%;bottom:0%;border:2px blue solid;"> I am fixed </p>
<!-- It takes document as its parent and align item based on document level. Does not change even when u scroll --> .
<p style = "position:absolute; left:30%; top : 50%;border:2px red solid;"> I am absolute </p>
<!-- Takes the container as its parent. Nearest ancestor and act like fixed. --> .
<p style = "position:sticky; left:10%; top:0%; border:2px green solid;"> I am sticky </p>
<!-- A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). --> .
<p> FILL IN HERE WITH SOME EXTRA DATA TO SEE STICKY effect . Sticky Effect works if you have scrollable data. </p>
</div>
