Table of contents
CSS Positions helps you design beautiful interfaces with ease. Before we dive into CSS Position, lets briefly see the two types of elements on a web page - block-level elements and inline elements.
Block-level elements such as<h1>, <div>, <p> are contained on their own line. Because block-level elements start with a line break, two block-level elements can't exist on the same line without styling.
Inline elements such as <a>, <img>, <span> don't form their own blocks. Instead, they are displayed within lines. They line up next to one another horizontally; when there isn't enough space left on the line, the content moves to a new line.
Now let's see how we can change and manipulate these positions in CSS. The position property allows us to define the position of an element. Along with the position we can add properties to position the element in the viewport, such as top, right, left and bottom.
Syntax
selector {
position: desiredPosition;
}
CSS has a property called position that helps us change and move the items we want. There are 5 values in this position property.
- Static
- Relative
- Absolute
- Fixed
- Sticky
1. Static
This is the default position of every HTML element (also known as "normal" positioning), so if you don’t add a position attribute then browser automatically takes this by default. Also we can’t do much with this position. The HTML element won't alter its position, no matter what values you associate with properties like top, right, left and bottom. Also, the z-index property won't affect this position type.
Syntax
selector {
position: static;
}
Example: As you see, the static div is now in the usual document flow, next to its previous element.
.static-div{
position: static;
}
2. Relative
At this position, the HTML element would shift relative to its current/initial position. To offset the element from this relative position, set values for the top, right, left and bottom properties. By adding these offset properties, we can achieve extra space wherever required.
Syntax
selector {
position: static;
}
Example: We select the class “relative-div”, and set its position to “relative”, and align it 20px from top and 50px from left. Now the div gets positioned relative to its original position of the document flow, i.e., it shifts it 20px from top and 50px from left, from its static position.
.relative-div{
position: relative;
top: 20px;
left: 50px;
}
3. Absolute
This is a bit tricky to understand, and is usually confused with fixed position. At this position, the element ignores the normal document flow & is positioned with respect to its nearest positioned parent element. If there are no parent elements, then the element will take viewport as its parent. Also to re-iterate, its the nearest positioned parent element, and its not the nearest positioned sibling element. Position of the nearest parent should be one among relative, absolute, fixed or sticky. static position of parent is ignored by the absolute position, as it simply means the viewport position. The trade-off (and most important thing to remember) about absolute positioning is that these elements will be removed from the normal flow **of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements.
Syntax
selector {
position: absolute;
}
Example: We select the class “absolute-div”, and set its position to “absolute”, and align it 20px from top and 50px from left.
.absolute-div{
position: absolute;
top: 20px;
left: 50px;
}
You might be confused with the above example image. To understand absolute positioning, you need to look into the html aswell, which is here below.
HTML of the above example
<body>
<div class="outer-div">Outer Div</div>
<div class="absolute-div">Absolute Div</div>
</body>
</html>
Hope that makes sense now. We didn’t add any position to the parent of the absolute-div class, which is the body. So absolute-div took the viewport as the parent, and positioned it 20px from top and 50px from left.
Lets make it even clear with a parent div element.
HTML
<body>
<div class="parent">
<div class="outer-div">Outer Div</div>
<div class="absolute-div">Absolute Div</div>
</div>
</body>
CSS
.parent{
width: 500px;
height: 500px;
background-color: rgb(164, 163, 249);
position: relative;
top: 100px;
left: 100px;
}
.absolute-div{
background-color: rgb(244, 121, 238);
position: absolute;
top: 20px;
left: 50px;
}
Result
You can now clearly see that, the parent div is relative positioned from the viewport at 100px from left and top. Now it is evident that the absolute positioned div is positioned 20px from top and 50px from left, from the parent div.
4. Fixed
At this position, the element is positioned with respect to the viewport. And as the name suggests, the gets fixed at the defined position, even if the page is scrolled or scaled.
Syntax
selector {
position: fixed;
}
Example: We select the class “fixed-div”, and set its position to “fixed”, and align it 20px from top and 50px from left. Now if you scroll or scale, the div doesn’t change its position.
.fixed-div{
position: fixed;
top: 20px;
left: 50px;
}
5. Sticky
Sticky is a combination of relative and fixed positions. With a sticky position, an element can be made to be sticky on the viewport, when its relative position hits the viewport boundary. When refreshed, the element seems to be relative positioned, but when we scroll (or) scale and let it hit the viewport boundary, it then behaves like a fixed element.
Syntax
selector {
position: sticky;
}
Example: We select the class “sticky-div”, and set its position to “sticky”, and align it 20px from top and 50px from left.
.sticky-div{
position: sticky;
top: 20px;
left: 50px;
}
Special mention to Hitesh Choudhary for motivating me to write this blog! :)