The position is a CSS property that sets how an element is positioned in a document. To top, left, right, and bottom properties determine the final location of positioned elements.
There are five values of the position property.
Static
Relative
Absolute
Fixed
Sticky
Let's have a look at each one by one.
Static Positioning:
This is the default value for elements. The element is positioned according to the normal flow of the document. The top, right, bottom, and left properties have no effect.
Relative Positioning:
An element with a relative is positioned relative to its normal position. The element is positioned according to the normal flow of the document.
When you give a relative position to an element, nothing changes until you add at least one of the left, right, top and bottom properties to the element setting the left, right, top and bottom properties to the positioned element will cause it to be adjusted away from its normal position.
syntax: position: relative;
HTML Code
<div class="container">
<div class="item one">one</div>
<div class="item two">two</div>
<div class="item three">three</div>
<div class="item four">four</div>
</div>
CSS Code
.container{
display:flex;
}
.item{
height: 50px;
width: 50px;
border: 2px solid black;
margin: 20px;
text-align: center;
}
.one{
position: relative;
left: 30px;
}
Result
Absolute Positioning:
An element with absolute is positioned ancestor. however, if a positioned element has no positioned ancestors, it uses the document body and moves along with the page scrolling. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none, in which case that ancestor behaves as the containing block. Its final position is determined by the values of the top, right, bottom, and left.
HTML Code
<div class="container">
<div class="item one">one</div>
<div class="item two">two</div>
<div class="item three">three</div>
<div class="item four">four</div>
</div>
CSS Code
.container{
display:flex;
}
.item{
height: 50px;
width: 50px;
border: 2px solid black;
margin: 20px;
text-align: center;
}
.one{
position: absolute;
right: 30px;
}
Result
Fixed Positioning:
Fixed Positioning is similar to absolute positioning.
for example box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.
HTML Code:
<div class="container">
<div class="item one">one</div>
<div class="item two">two</div>
<div class="item three">three</div>
<div class="item four">four</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam asperiores repudiandae, at quisquam esse cum, perspiciatis suscipit neque dolor similique quibusdam impedit dignissimos id, voluptas nam consectetur officia architecto eaque maiores? Vero modi non voluptate tempora, hic repellab quaerat nostrum minima suscipit. Inventore distinctio unde quae harum cupiditate, impedit iste non nobis! Aut assumenda nobis veritatis?</p>
CSS code
.container{
display:flex;
}
.item{
height: 50px;
width: 50px;
border: 2px solid black;
margin: 20px;
text-align: center;
background-color: yellow;
}
.one{
position: fixed;
right: 30px;
}
Result:
Sticky Positioning:
An element with a sticky is positioned based on the user's scroll position.
You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
HTML Code:
<div class="container">
<div class="div1"></div>
<div class="sticky"> Hello I am Stick to my position</div>
<div class="div2"></div>
<div class="div4"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quisquam accusantium consequatur omnis nostrum iste officiis nisi doloribus veniam quam vel dicta quas, perferendis, porro libero! Cumque a iusto nisi velit assumenda dignissimos ea modi quia culpa consequuntur asperiores commodi, quidem maiores quibusdam ratione neque dicta voluptates at quisquam, corrupti dolores mollitia necessitatibus doloribus? Hic libero aliquam nesciunt quae dolore nisi error eligendi totam iusto voluptate. Qui aliquam odit laborum. lorem500</p>
</div>
CSS Code:
.div1, .div2, .div4{
width: 75px;
height: 75px;
background-color: yellow;
margin: 20px;
}
.sticky{
height: 120px;
background-color: black;
position: sticky;
top: 70px;
color: white;
text-align: center;
}
Results:
The element is in a relative position until and unless you scroll to a point in the viewport where the element has a distance of 70px from the top, thereafter it becomes fixed.
I hope you must got an idea about the CSS Position.
Thank you for reading.