.box {
position: relative;
}
The position of an HTML element can either be static, relative, absolute or fixed. And recently, sticky has been added to the mix.
You can set the position of an element with the CSS property position
The position property works together with the properties top, right, bottom, and left. I'll call them co-ordinate properties. Co-ordinate properties function like margin properties and when I start explaining the different types of positioning, you'll understand it even more.
Relative Positioning
You can position an element relatively by giving its position property the value of relative.
.box {
position: relative;
top: 20px;
}
When an element is positioned relatively, it is shifted from where it is originally supposed to be by 0px. This means its new position is relative to its old position. If you add a co-ordinate property like top: 20px, it is shifted in such a way that it will have a top margin of 20px from its original position.
When it moves to its new position, the elements around it don't re-arrange themselves to adjust to its new position. They stay put, behaving as if the relatively-positioned element is still in its original position.
You can add other co-ordinate properties to the element that is positioned relatively like the property left.
.relative-box {
position: relative:
top: 20px;
left: 30px
}
The code snippet above will make the element with class relative-box to move down by 20px and move right by 30px so that it will have a top margin of 20px and a left margin of 30px from its original position.
Note that to a relatively-positioned element, if you add a top property, the element moves down; if you add a left property, the element moves right and the same applies to the other co-ordinate properties.
Absolute Positioning
You can position an element absolutely by giving its position property the value of absolute.
.absolute-box {
position: absolute;
top: 20px;
}
Absolute positioning works similarly to relative positioning. It works together with co-ordinate properties. There are just a few differences.
Differences between absolute and relative positioning
Relatively positioned elements are positioned relative to their original position but absolutely positioned elements are positioned relative to the HTML's body tag(
<body></body>).If you don't set any top, left, bottom or right properties on
.relative-box, the element will stay in its original position but if you don't set any of those properties on .absolute-box, you will find.absolute-boxat the top-left corner of the page.When you position an element absolutely, the other elements in the page will re-arrange themselves to adjust to the new position of the element in the page.
This means that when you add a co-ordinate property to set its margin, the element will have that margin but the margin will be from the edge of the page, and not from its original position.
.absolute-box {
position: absolute;
top: 10px;
left: 20px;
}
The code snippet above will make the element .absolute-box to have a top margin of 10px from the top of the page and a left margin of 20px from the left of the page.
Absolute positioning has another important behavior. You can use absolute positioning to position an element relative to another element.
If the parent of .absolute-box is relatively positioned, .absolute-box will be positioned relative to that parent.
This means that .absolute-box will have a top margin of 10px from the top edge of its parent and a left margin of 20px from the left edge of its parent.
Long story short, an element that is positioned absolutely will be relative to the body of the page but if it is inside a parent element that is positioned relatively, it will be positioned relative to that parent.
Fixed Positioning
.fixed-box {
position: fixed;
top: 5px;
left: 10px;
}
An element with a fixed position will be placed in a position relative to the browser window. It is taken out of the flow of the page completely and it will not scroll along with the page. It will stay fixed at a particular point.
The element with class fixed-box will have a top margin of 5px from the top of the browser window and a left margin of 10px from the left of the browser window.
If you don't add any top, left, bottom or right properties, you'll find fixed-box at the top-left corner of the browser window.
When you give an element a fixed position, the other elements on the page will re-arrange themselves in response to the fixed element being removed from the page.
Static positioning
All HTML elements are positioned statically by default. Static is the default position of HTML elements on the page.
Top comments (0)