In CSS, we use the position property to position an element at a specific location on the page. The two most common CSS positioning methods are relative and absolute.
But many people have trouble understanding the difference between relative and absolute at first. In this article I will explain what these methods are and give examples of the position property.
CSS Position Property (position)
The position property is a CSS layout control system that determines how an HTML element will be positioned on the page.
We usually use the top, left, right, bottom, and z-index properties in addition to the position property in CSS.
There are a total of five types of position values in CSS.
- Static (
position: static) - Relative (
position: relative) - Absolute (
position: absolute) - Fixed (
position: fixed) - Sticky (
position: sticky)
Let's look at the detailed explanation one by one.
Table of Content
Static Position (static)
static is the default position value in CSS. If you don't give a position to an HTML element, it automatically acts as static.
When an element is in a static state, it remains in the normal flow of the page and cannot be moved up, down, left, or right. This means top, left, right, and bottom properties do not work for static positions in CSS.
Let's look at an example.
<div class="box"></div>
body {
background: bisque;
}
.box {
position: static;
top: 100px; /* Doesn't Work */
left: 50px; /* Doesn't Work */
width: 100px;
height: 100px;
background: blue;
}In this example, the top and left properties will not change the position of the box element in any way.
Most HTML layouts work without special positioning. There is no need to write position: static in CSS separately, and the CSS code remains clean.
Relative Position (relative)
relative positioning keeps the element in its normal position within the document, but you can offset it using the top, left, right, and bottom properties.
Remember that offset values move the element relative to its original position, not relative to the page. This allows you to further refine the placement without disrupting the overall flow of the page.
Let's look at an example of relative position.
<div class="box"></div>body {
background: bisque;
}
.box {
position: relative;
top: 100px;
left: 50px;
width: 100px;
height: 100px;
background: blue;
}In the example above, the box element is positioned 100 pixels down and 50 pixels to the right from its original position.
Let's look at another example.
<div class="container">
<div class="box"></div>
</div>body {
background: bisque;
}
.container {
background: red;
margin: 50px;
width: 200px;
height: 200px;
}
.box {
position: relative;
top: 100px;
width: 100px;
height: 100px;
background: blue;
}Here we have a container created and a box inside. So the container is the parent element, and the box is the child element. In the normal document flow, the container position becomes the starting point for the box element.
You can see that the container margin is 50 pixels, so the box element will also be 50 pixels down and to the right. When the box element position is relative and the top is set to 100 pixels, the box moves down 100 pixels relative to the container.
Absolute Position (absolute)
absolute positioning means an element is positioned relative to its nearest positioned parent, and the parent position must be relative, absolute, fixed, or sticky.
If the closest parent is static, the element will look for the next positioned parent (non-static) to use as its reference point.
Let's look at an example of absolute position.
<div class="container">
<div class="box"></div>
</div>body {
background: bisque;
}
.container {
background: red;
margin: 50px;
width: 200px;
height: 200px;
}
.box {
position: absolute;
top: 100px;
left: 20px;
width: 100px;
height: 100px;
background: blue;
}Here, the position of the container is not defined, so the default position is static.
You will see that the box is absolute, and it will be positioned relative to the browser window. Because the container is static, the box is moved 100 pixels down and 20 pixels to the left of the viewport.
Let's look at another complex example.
<div class="red-container">
<div class="green-container">
<div class="box"></div>
</div>
</div>body {
background: bisque;
}
.red-container {
position: relative;
background: red;
margin: 50px;
width: 200px;
height: 200px;
}
.green-container {
background: green;
margin: 50px;
width: 150px;
height: 150px;
}
.box {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background: blue;
}In this example, the position of the red-container is relative and the position of the green-container is not defined. This means that the position of the green-container is static.
The red-container becomes the reference point for the absolutely positioned box. So the box is placed 20 pixels down and 20 pixels to the right from the red-container .
Fixed Position (fixed)
fixed positioning works based on the browser window (viewport). This means that the element does not depend on its parent. An element defined with a fixed position remains in the same place even if you scroll.
You can specify where the element will be on the screen using the top, left, right, and bottom properties. Fixed position is useful for sidebar, chat box, and notification box.
Let's look at an example.
<div class="box"></div>
body {
background: bisque;
}
.box {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: blue;
}Here for position: fixed; top: 0; left: 0; the box element will be fixed to the top left corner of the screen.
Sticky Position (sticky)
sticky position is a mix of normal and fixed positions. The element stays in its normal place at first, but when you scroll to a certain point, it becomes fixed on the screen.
Sticky positioning is the best for things like table header, section title, or info box that you want to keep visible while scrolling.
Conclusion
Hopefully you now have a better understanding of how CSS positioning works.
You can create perfect layouts with static, relative, absolute, fixed, and sticky positioning types. Using position properties makes it easier to control the movement of elements and design web pages.
Happy Coding!
0 Comments