Positions in css || relative || absolute || fixed || sticky || static positions
Position in CSS:
The position property specifies the type of position for our element. There are 5 position styles in CSS:
static
relative
fixed
absolute
sticky
Elements are also then positioned using top, bottom left and right properties which you can use first you need to set a position that works differently according to position type.
<body>
<div class="normal">
First div
</div>
<div class="normal">
second div
</div>
<div class="static">
div with static position
</div>
</body>
Common CSS:
.normal{
width:300px;
height:150px;
background-color: azure;
margin: 20px;
border: 3px solid black;
padding: 10px;
}
Position : static;
Html elements position static by default . Top, bottom,right,left properties show no effect on the element.It is positioned div according to the normal flow of the page.
.static{
position: static;
width:300px;
height:150px;
background-color: blanchedalmond;
border: 3px solid black;
padding: 10px;
margin: 20px;
}
Position : relative;
An element with position: relative; is positioned relative to its normal position.
The top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other elements will not be adjusted to fit into any gap left by the element.
.static{
position: relative;
left:100px;
bottom:40px;
width:300px;
height:150px;
background-color: blanchedalmond;
border: 3px solid black;
padding: 10px;
margin: 20px;
}
Output:
From the bottom it is 40px away that’s why it overlaps over the second div.
Position:fixed;
The div arranges itself according to the viewport and it never changes its position even when you scroll it .Top, bottom,left and right properties are also used to position it.
.static{
position:fixed;
right:100px;
bottom:40px;
width:300px;
height:150px;
background-color: blanchedalmond;
border: 3px solid black;
padding: 10px;
margin: 20px;
}
Even when you scroll it displays there.
Position:absolute:
An element with position: absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport).
However; if an absolutely positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Absolute positioned elements are removed from the normal flow and overlap elements.
That div will remain there fixed to that position.
Position:sticky:
An element with position: sticky; is positioned based on the user's scroll position.A sticky element switches 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.
Comments
Post a Comment