🎏What is position property ?
The position property is used to set how an element is positioned in a document.
The default position is static ; other than this there are mainly four types in which we can position our element .
☝️Relative :
A relatively positioned element is an element whose calculated position value is relative to its original position.
The top and bottom offset specify verticle position of an element and left and right offset specify horizontal position of an element.
- These offset does not affect the position of any other element.
Thus the space given for the element in the page layout is the same as if position were static.
Example :
<div class="parent">
<p class="child">one</p>
<p class="child" id="two">two</p>
<p class="child">three</p>
<p class="child">four</p>
</div>
/* css code */
.parent {
border: 2px solid #000;
height: 500px;
width: 500px;
align-items: center;
}
.child {
height: 50px;
width: 50px;
margin: 5px;
border: 2px solid #000;
background-color: darkgrey;
}
/* we will apply position property on second child */
#two {
position: relative;
left: 20px;
}
If you put this code in your respective html and css files then, you will see that the second child is shifted towards right respect to its parent.
Hence, by relative we can set elements position according to its closest decendent parent.
✌️Absolute :
- An absolutely positioned element is an element whose computed position value is absolute.
- The top, right,bottom and left properties specify offsets from the edges of the elements containing block.
- The element is removed from the normal document flow, and no space is created for the element in the page layout.
- It is positioned relative to its closest ancestor, if any; otherwise it is placed relative to the initial containing block.
The margins of absolutely positioned boxes do not collapse with other margins .
Example :
We can follow the same code as above for absolute also with little change,
#two { position: absolute ; left : 20px; }As you will apply this you will come to see that, The element come out from normal document flow and leaving 20px of space from parent.
👌Fixed :
- The element is removed from the normal document flow , and no space is created for the element in the page layout .
- It is positiond relative to the initial containing block relative to the viewport.
- It's final position is determined by the values of top, right,bottom and left.
- This value always creates a new stacking context.
In printed documents the element is placed in the same position on every page.
Example:
<div class="parent">
<p class="child">one</p>
<p class="child" id="two">two</p>
<p class="child">three</p>
<p class="child">four</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quis nisi nostrum sint porro? Repellat, optio quos! Vitae ab fugit necessitatibus, illo praesentium esse deserunt! Tenetur animi dolores esse blanditiis non fugit doloremque? Voluptate reiciendis eligendi, iste rerum deleniti veritatis obcaecati praesentium earum quas odio accusantium consectetur eaque consequuntur! Magni sit ullam mollitia nihil, totam velit dolores ab, explicabo quas dolore repellendus laborum repellat et aperiam nobis libero rem adipisci aliquam sequi? Unde labore quidem quia laborum eaque distinctio aliquid delectus quam minima beatae. Fugiat tempora fuga velit repudiandae quo repellendus explicabo ducimus quia at! Deserunt, autem. Natus fugit cumque nesciunt pariatur mollitia odit temporibus minus unde, sit laudantium aut, velit cum maiores accusamus. Dolores tempora modi est libero, cupiditate omnis quam, neque quod quis magnam ex officiis adipisci veritatis distinctio! Nostrum obcaecati, sunt debitis voluptas dicta placeat ea adipisci quos perspiciatis laborum? Veritatis facilis optio consequatur illum quasi, dolor atque ad maiores recusandae molestiae deleniti mollitia labore. Ex commodi minima consectetur illum! Vitae debitis cum ullam tenetur officiis asperiores provident voluptatem eligendi, consectetur dolores quaerat aspernatur, hic mollitia quasi reiciendis nihil itaque, commodi necessitatibus. Illo recusandae alias deserunt suscipit ut magni fugit assumenda quidem fuga eaque optio excepturi, ipsum, id distinctio commodi earum facere esse, fugiat magnam ea. Cum, ea in reprehenderit dolore iure delectus laudantium quas provident est enim quidem nihil! Voluptatum sapiente dolor nobis ea est sunt natus labore, harum aspernatur, fugit quo. Velit officiis doloribus sint reiciendis dolorum ratione ducimus optio, necessitatibus ab, veritatis assumenda deleniti sit voluptatibus, sequi corporis pariatur porro aliquid vel! Voluptatem, molestiae? Officiis est illum quisquam dolorum quod optio cum. Nemo consequatur, exercitationem vitae fuga similique pariatur tempora modi dolor est ullam veritatis! Vero, id obcaecati rem totam iusto praesentium repudiandae sint dignissimos consequatur at sunt placeat beatae suscipit voluptatibus omnis adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas laboriosam excepturi facilis nesciunt quia id nam veritatis. Accusamus, asperiores molestiae. Velit, architecto iusto. Deserunt dolores quo quisquam ea commodi assumenda temporibus, sunt neque. Eveniet, repellat, autem ut, totam sint quasi cupiditate at deserunt quam libero repellendus facilis ipsum temporibus exercitationem impedit nulla corrupti atque. Tenetur, necessitatibus sequi. Explicabo illum, vel sit quidem placeat ducimus earum perferendis deserunt quia impedit corporis nihil rem laborum incidunt odio? Quidem blanditiis error quas aut eos illum adipisci nisi enim. Rem dolorem at voluptatum tempore aliquid et ex consequatur, est molestiae quam necessitatibus, ipsam odit!</p>
</div>
CSS
.parent {
border: 2px solid #000;
height: 1000px;
width: 500px;
align-items: center;
}
.child {
height: 50px;
width: 50px;
border: 2px solid #000;
background-color: darkgrey;
}
/* we will apply position property on second child */
#two {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #f7f706;
}
As you run this code you will see that, The second item is fixed at bottom right corner of page and remains fixed on scrolling the page also.
👊Sticky :
- A stickily positioned element is an element whose computed position value is sticky.
It is treated aa relatively positioned until its containing block crosses a specified threshold within its flow root , at which point it is treated as stuck until meeting the opposite edge of its containing block.
Example :
HTML CODE
<div class="parent">
<p class="child">one</p>
<p class="child" id="two">two</p>
<p class="child">three</p>
<p class="child">four</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quis nisi nostrum sint porro? Repellat, optio quos! Vitae ab fugit necessitatibus, illo praesentium esse deserunt! Tenetur animi dolores esse blanditiis non fugit doloremque? Voluptate reiciendis eligendi, iste rerum deleniti veritatis obcaecati praesentium earum quas odio accusantium consectetur eaque consequuntur! Magni sit ullam mollitia nihil, totam velit dolores ab, explicabo quas dolore repellendus laborum repellat et aperiam nobis libero rem adipisci aliquam sequi? Unde labore quidem quia laborum eaque distinctio aliquid delectus quam minima beatae. Fugiat tempora fuga velit repudiandae quo repellendus explicabo ducimus quia at! Deserunt, autem. Natus fugit cumque nesciunt pariatur mollitia odit temporibus minus unde, sit laudantium aut, velit cum maiores accusamus. Dolores tempora modi est libero, cupiditate omnis quam, neque quod quis magnam ex officiis adipisci veritatis distinctio! Nostrum obcaecati, sunt debitis voluptas dicta placeat ea adipisci quos perspiciatis laborum? Veritatis facilis optio consequatur illum quasi, dolor atque ad maiores recusandae molestiae deleniti mollitia labore. Ex commodi minima consectetur illum! Vitae debitis cum ullam tenetur officiis asperiores provident voluptatem eligendi, consectetur dolores quaerat aspernatur, hic mollitia quasi reiciendis nihil itaque, commodi necessitatibus. Illo recusandae alias deserunt suscipit ut magni fugit assumenda quidem fuga eaque optio excepturi, ipsum, id distinctio commodi earum facere esse, fugiat magnam ea. Cum, ea in reprehenderit dolore iure delectus laudantium quas provident est enim quidem nihil! Voluptatum sapiente dolor nobis ea est sunt natus labore, harum aspernatur, fugit quo. Velit officiis doloribus sint reiciendis dolorum ratione ducimus optio, necessitatibus ab, veritatis assumenda deleniti sit voluptatibus, sequi corporis pariatur porro aliquid vel! Voluptatem, molestiae? Officiis est illum quisquam dolorum quod optio cum. Nemo consequatur, exercitationem vitae fuga similique pariatur tempora modi dolor est ullam veritatis! Vero, id obcaecati rem totam iusto praesentium repudiandae sint dignissimos consequatur at sunt placeat beatae suscipit voluptatibus omnis adipisci?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas laboriosam excepturi facilis nesciunt quia id nam veritatis. Accusamus, asperiores molestiae. Velit, architecto iusto. Deserunt dolores quo quisquam ea commodi assumenda temporibus, sunt neque. Eveniet, repellat, autem ut, totam sint quasi cupiditate at deserunt quam libero repellendus facilis ipsum temporibus exercitationem impedit nulla corrupti atque. Tenetur, necessitatibus sequi. Explicabo illum, vel sit quidem placeat ducimus earum perferendis deserunt quia impedit corporis nihil rem laborum incidunt odio? Quidem blanditiis error quas aut eos illum adipisci nisi enim. Rem dolorem at voluptatum tempore aliquid et ex consequatur, est molestiae quam necessitatibus, ipsam odit!</p>
</div>
CSS
.parent {
border: 2px solid #000;
height: 1200px;
width: 500px;
align-items: center;
}
.child {
height: 50px;
width: 50px;
border: 2px solid #000;
background-color: darkgrey;
}
/* we will apply position property on second child */
#two {
position: sticky;
top: 10px;
background-color: #f7f706;
}
As you run code in your machine you will come to know that, As soon as the top value of second item becomes 10px it behaves like stuck to top and whole content goes under it.
Hope you will execute all the code and if understood well then give your views on it.
🔗Social Links :
Instagram : instagram.com/kaushikgabhane?r=nametag.
Linkedin : linkedin.com/in/kaushik-gabhane-013708203