Hi Friends, I have written a blog on CSS Positioning, hope it will easy to read and understand.
CSS Positions Property with Example
Position Property has 5 values-
- Static
- Relative
- Absolute
- Fixed
- Sticky
Sticky Position
- It is default position of every element.
- Explanation- lets take a box and we can see there will be no change in box position.
by applying static position nothing is change.
//HTML Code-
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
//CSS Code-
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
height:100px;
width:100px;
border:1px solid black;
background-color:lightgreen;
position:static;
}
Relative & Absolute
Both works in same way except that
- Relative -> works on Parent Class
- Absolute -> words on Children class
Explanation- lets take a box means we are working only on container, child is not in role till now.
After applying position relative we can see box moved 100px from left.
//HTML Code-
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
//CSS Code-
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
height:100px;
width:100px;
border:1px solid black;
background-color:lightgreen;
position:relative;
left:100px;
}
Relative vs Absolute
Now lets take a children to explain it. child box moved 100px from its parent means outer box as seen in below image.
//HTML Code-
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
//CSS Code-
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
height:300px;
width:300px;
border:1px solid black;
background-color:lightgreen;
position:relative;
}
.child{
width:100px;
height:100px;
background-color:pink;
border:1px solid black;
position:absolute;
left:100px
}
- Suppose we are giving relative position to body not the parent box then output will be shown like below. here we are assuming that parent box is in middle of the page
body {
position: relative;
}
.container {
height: 300px;
width: 300px;
margin:auto;
border: 1px solid black;
background-color: lightgreen;
}
.child {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid black;
position: absolute;
left: 100px;
}
Fixed Position After applying fixed position to the box it has fixed at its given position. Even we scroll, it will no move from its fixed position i.e. 100px from top and 200px from left.
//HTML Code-
<body>
<div class="container">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Tempore, soluta?</p>
<div class="child-box"></div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Tempore, soluta?</p>
</div>
</body>
//CSS Code-
.container {
height: 1000px;
}
.child-box {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid black;
position: fixed;
top:100px;
left: 200px;
}
Sticky Position
//CSS Code-
.child-box {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid black;
position: sticky;
top:10px;
left: 200px;
}
We can understand by below example-
- After applying sticky position to the box- if we check without scrolling it will remain at its original position means 200px from left.
- But when we check with scrolling, box moves up but when it reached at given position means 10px from top then it sticks there.
This article is published w/ Scattr ↗️
Top comments (0)