When you want to design an attractive layout, you will need to change the typical flow of your element positioning.
For Example; you may have seen on most websites that when you scroll up or down, the navigation bar "sticks" on the top of the page, or on some websites there is a helper box that has a "fixed position" on the bottom right corner. you can do this by using CSS's Position property
There are five types of position static, fixed, relative, absolute and sticky
In this article, we will cover all five types.
Let's get started!
Static, the default position of HTML elements in CSS
By default, the HTML element has a static position property that follows the HTML code
For example, each block element like div will start on a new line ie appear one after another vertically
and inline elements like span will appear next to each other
<body>
<p class="p1">This is <span>box 1<span/> </p>
<div class="box one"></div>
<p class="p2">This is <span>box 2<span/> </p>
<div class="box two"></div>
<p class="p3">This is <span>box 3<span/> </p>
<div class="box three"></div>
</body>
.box {
height: 100px;
width: 100px;
border-radius: 5px;
margin: 10px;
}
.one {
background-color: blueviolet;
}
.two {
background-color: chartreuse;
}
.box.three {
background-color: chocolate;
}
span {
background-color: #b0afaf;
border-radius: 3px;
}
you can see that the position property is not given to the above example, hence the element follows the HTML code.
what if you want to move first div towards the right or left,
there is offset property to do like left, right, top and bottom.
But in the above example, you cant do it because position: static have no effect on offset properties
what is position relative in CSS;
position: relative; let you change the position of an element.
To modify the position of an element you should specify the offset property left, right, top or bottom to move an element in a specific direction from its original position
If you want to move an HTML element like div in the right direction
you should increase left offset property this means that we are increasing the distance from the left of the element's original position. And for moving elements towards the left we should increase rightoffset property and this goes the same for top and bottom.
Let's take at the code snippet.
.one {
background-color: blueviolet;
position: relative;
left: 100px;
}
In the above example, you can see that I increase the left property to make an element move toward the right ➡️,
what if we increase top the element from the original position, let's take a look.
.one {
background-color: blueviolet;
position: relative;
top: 100px;
}
So in the above example, we move box one towards the bottom.
But why is box one overlapping box two, because by using position: relative: property it introduces the ability to use z-index property, which means that we can move our element to all three axis x, y, and z
Okay so we understood that by using position: relative property we also can move our element in all the axis, but in the above example, we have not used z-index property to box one overlaps on box two,
Even if you don't set z-index value on the element, it will appear on top of all the statically positioned elements.
Position fixed
In CSS Position Fixed, fixed is a value applied with position property. This position property is used to align the elements at the desired location. This fixed position always sticks to a specific location and it can’t be moved to any side of the page. Even if we minimize or maximize the page also its position is fixed only.
like position: relative; it also introduces the ability to use z-index it will appear on top of all the statically positioned elements.
let's look at the code snippet
.two {
background-color: chartreuse;
position: fixed;
top: 300px;
left: 300px;
}
look in the above example if scroll down or up box tow it will not change its position and always appears top:300px and left: 300px from view port viewport
position: sticky
The position of the CSS sticky element depends upon the given offset or a threshold top, bottom, left, and right value that the developer provides. If the element has not yet reached the threshold, it retains in the relative position. Once the threshold is reached, you’ve got the CSS position fixed and the elements get “stuck” to the same block. This is not a one-time operation though. The CSS position sticky element toggles between these two positions depending on the scroll of the page. So, a CSS position sticky element that is currently “fixed” will move back to the “relative” when it will meet the opposite end of its container block.
for example, I want the <p> element to stick to the top: 0px of parent element.
Let's see the code snippet
.p1,
.p2,
.p3 {
position: sticky;
top: 0;
}
position absolute;
If you update the CSS rule for box one to the following:
.one {
background-color: blueviolet;
position: absolute;
}
you can see that box one appears on top of all statically positioned elements and it stays in the original position because we have not given offset to the element,
let's try to give top:100px and right:300px
and wrap box one, box two, and box three in a div, called the parent
<body>
<div class="parent">
<p class="p1">This is <span>box 1<span/> </p>
<div class="box one"></div>
<p class="p2">This is <span>box 2<span/> </p>
<div class="box two"></div>
<p class="p3">This is <span>box 3<span/> </p>
<div class="box three"></div>
</div>
</body>
.one {
background-color: blueviolet;
position: absolute;
top:100px;
left:300px;
}
in the above example box, one is relative to the page itself
let's give position: relative; to the parent div which makes box one relative to the parent element,
.parent {
position: relative;
border: solid;
margin: 50px;
height: 300px;
width: 500px;
}
and now if i try to make right:0px
box one stay inside the parent element.