If you ever had problems using the CSS position feature, maybe you are not alone. In theory, things are dead simple:
There are five different values to control object positioning in CSS:
static
relative
fixed
absolute
sticky
In practice, things are not that simle, as the position property also influences the page layout:
- a relative position moves the element, but still consumes some space in the original position.
- an absolute or fixed position moves the element, but does not consume any layout space.
So, let´s try out how it works. I created an example to try this. Some explanations on the code:
<style>
div {
...
top: 150px;
left: 150px;
}
.white {
width: 200px;
height: 200px;
}
.red {
background-color: red;
width: 90px;
height: 100px;
}
.green {
background-color: green;
width: 100px;
height: 90px;
}
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed; }
.sticky {position: sticky; }
</style>
There is a top and left set for all div´s. As long, as you do not apply a position property to the <div> the values are ignored. There are three types of <div>´s used:
- A big white box
- A small red box
- A small green box
Green and red have a different size to show overlapping elements. So, now we create the elements:
<body>
<div class="white">div1
<div class="red "> div2 </div>
</div>
<div class="white">div3
<div class="green"> div4 </div>
</div>
<p style="height: 900px;"></p>
<p>END</p>
</body>
This will create two white boxes with a colored box inside, all elements are placed automatially to the next free space:
Now, we can add some positioning:
<body>
<div class="white">div1
<div class="red absolute"> div2 </div>
</div>
<div class="white">div3
<div class="green absolute"> div4 </div>
</div>
<p style="height: 900px;"></p>
<p>END</p>
</body>
Like expected, the inner boxes are moved out to an absolute position.
Now, add some positioning to the outer div´s. Here we set div3 to "absolute":
What happend? The green box is not absolute anymore, it is positioned relative to it´s parent. Some reseach tells us, that absolute position in CSS is only absolute, as long as the parent does not have any position set. In that special case, the body is used as the ancor.
If you set any positioning on a parent (maybe also, relative with an offset of (0/0)), then absolute means absolute relative to the relative parent... . Must have been a very nice evening when they invented this - everybody was drunk!
A nice surprise happens, if you set the first box to absolute:
Now, the first white box is removed from the layout making the second box get shifted. As a result, the whole layout get´s mixed up.
You will find more strange results using fixed or sticky positioning in various combinations, please try out.
The main thing to remember is:
Absolute positioning will become relative, if the parent has any position set.
Anyway, controlling the layout with the position property in nested objects is always an adventure! Hope this helps to understand the rules.
Top comments (0)