When I create a layout from scratch, I find myself adding different values to the
position CSS property and to the DPP (direction position properties, I just made that acronym up) top, right, bottom and left properties, hoping that magically they will look as I expect. Maybe you do too.
It would probably be better to learn what they do for good, so we know how to use them.
First of all, a positioned element is one that has a different value than
position: static, which is the default. In other words, an element that has
position set as
Having that said, we can state that
position defines how an element is positioned on the page. On the other hand, the DPP add an offset on the direction they specify.
Let’s see how each one works.
This is the default value and means that the element will be placed according to the page flow. Because of that, the DPP don’t affect it.
The element will also be placed according to the page flow but now you can use the DPP to add an offset relative to itself. As we can see in the animation below, the space this element is supposed to use is reserved and other elements are not affected even after adding an offset.
You can use this value to place an element exactly where you want it, also, the element is removed from the page flow. This position will be relative to the next parent element with
absolute positioning. If there is no such parent, it will be placed relative to the page itself as the next example.
The element is positioned relative to the viewport since the viewport doesn’t change when scrolling, the element will be fixed exactly where you placed it. Also, just like
absolute, the element is removed from the page flow and it will be relative to the next parent element with
It behaves like the
fixed value but relative to itself since the element is placed according to the page flow. In the example, we can notice that once we are able to see the element and we keep scrolling it will be fixed.
I hope that now you are able to use those properties knowing exactly what they do.