CSS Position: static, relative, absolute, fixed, sticky
3 min readJul 2, 2022
Best way to debug the CSS is in inspecting the browsers itself. But sometime it is really helpful and reduce the debugging time if we know the exact working the CSS property. In this post I covered CSS position property with different examples.
5 property of CSS Position,
static, relative, absolute, fixed, sticky
HTML Code
<div class= "main-container">
<div class="child-1">
this is example of child 1
</div>
<div class="child-2">
this is example of child 2
</div>
<div class="child-3">
this is example of child 3
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab magni architecto reprehenderit accusantium consectetur fuga ipsum voluptates id aspernatur repellat saepe perferendis quidem doloribus, delectus quo aliquid quibusdam ea dolore? Hic magni natus esse maxime animi ipsa laborum deserunt est vero ex inventore eum veniam adipisci asperiores quaerat beatae repellendus et, cumque quis sequi minima. Amet explicabo maiores quis, ipsa voluptatem ipsum facilis vitae sit! Enim laboriosam quae dignissimos dolorem voluptate eius quasi autem quisquam, consectetur facere sit! Eaque blanditiis totam praesentium, quam earum, minima illo, dolore deleniti dicta suscipit assumenda natus maiores possimus porro dolor eligendi consequuntur odit temporibus atque voluptate aut cupiditate. Quidem eveniet sit perspiciatis, commodi fugit voluptatum totam? Sint qui itaque sapiente vero rem soluta dignissimos ratione minima vel quod nemo inventore, sit officia accusantium facilis atque earum ea tempore, nam architecto ipsam unde. Reprehenderit dicta, repudiandae obcaecati voluptas veniam delectus?</p>
</div>CSS Code
/* position property css */
/* static, relative, absolute, fixed, sticky *//* example for position: static *//*
.main-container{
height: 200px;
width: 200px;
border: 2px solid red;
}
.child-1{
padding: 10px;
background-color: #d1bfe3;
}
.child-2{
position: static;
bottom: 20px;
left: 20px;
background-color: #bfe3de;
padding: 10px;
}
.child-3{
padding: 10px;
background-color: #d1bfe3;
}
*//* example for position: relative *//*
.main-container{
height: 200px;
width: 200px;
border: 2px solid red;
}
.child-1{
padding: 10px;
background-color: #d1bfe3;
}.child-2{
background-color: #bfe3de;
padding: 10px;
position: relative;
top: 20px;
left: 20px;
}.child-3{
padding: 10px;
background-color: #d1bfe3;
}
*//* example of position: fixed *//* always positioned relative to the <html> element. *//*
.main-container{
height: 200px;
width: 200px;
border: 2px solid red;
}
.child-3{
position: fixed;
bottom: 0px;
right: 0px;
} *//* example of position: absolute *//* if parent div has position relative property then it will be positioned in reference of parent div otherwise it will be positioned in reference of page */
/* try commenting the position property in main-container *//*
.main-container{
position: relative;
height: 200px;
width: 200px;
border: 2px solid red;
}
.child-1{
position:absolute;
top: 100px;
right: 0;
padding: 10px;
background-color: #d1bfe3;
}
.child-2{
background-color: #bfe3de;
padding: 10px;
}
.child-3{
background-color: #e3c066;
padding: 10px;
} *//* example of position: sticky *//* sticky is positioned based on user scroll.
must specify at least one property of top, left, right, bottom to work.
*/.main-container{
height: 1000px;
width: 200px;
border: 2px solid red;
}.child-2{
position: sticky;
top: 10px;
background-color: #e3c066;
padding: 10px;
}
Thanks for reading.
