CSS Series: Positioning
Understanding CSS Position Property
A look around to static, relative, absolute, fixed, sticky
What is positioning?
There are different ways or methods which allow us to put elements where we want, to position them on the document/screen. We can use display, float, and position properties. Today we are going to cover the position property.
Which are the values for position?
- Static (default)
- Relative
- Absolute
- Fixed
- Sticky
Let’s talk about each of them
1) Static (default)
This is the default value for an element. Static positioned elements are displayed in the normal page flow. The left, right, top, bottom and z-index properties do not affect an element with position: static.
So, let’s see an example of this.
In the above image, we can see that position: static; is not present (at least you are not seeing it, but you know is the default value), and also, you see that the order of the elements is the same as you have defined on your HTML (#first-element is the first element rendered, then, #second-element). Now we are going to add the position: static to show that nothing is going to happen, because, as we said before, is the default value, and, we will add the top and left properties, just to show they are not going to affect the static behavior.
Now that we have this clear, I’m going to show the differences if we used absolute or relative (next in our queue).
Below you can see that we are using position: absolute, and looks like the #first-element just disappeared, but, it is behind the #second-element because both (as we are setting position, top and left at the div selector) have the same properties. But, this allows us to take an introduction to the absolute behavior.
So, the next example will show the use of the position: relative , and, we can see both elements have been moved as a kind of block, and that is because #first-element was moved from 0,0 to 100,100, and #second-element from 100,0 to 200,100.
2) Relative
Position relative means that is relative to itself, to the place it has in the DOM. Moving this element around the layout does not affect the position of any other elements. Also, now we can use properties like the top, left, bottom, right, and also z-index
In our first example, we can see the first div is positioned relative to itself and moved 20px from the left and the top, also, we can see that the second elements remain in the same position, because the space of the first element is still present.
Now we are going to add z-ondex: -1, just letting you guys know that it works with the relative positioning.
And finally, we are going to move the second element 20 negative pixels to the top of the layout, that is because I want to show you that the 0px is from the place that the element was initially and not the 0px from the layout.
3) Absolute
Absolute is a powerful type of positioning because it allows you to literally place an element everywhere you want it using top, right, bottom, and left .
When you set this position, the element is removed from the normal document flow (no space is created for the element in the layout) and is automatically positioned to the starting point of its parent element if this has a position value other than static. If it doesn’t have any parent or the parent is static, the <html> tag will be its parent. Also, margins do not collapse with other margins. So, said that, let's play.
In the first example, I just created a container with border 1px red, with this we are going to visualize when we move the #first-element.
Now, adding the position absolute, plus, top and left properties, we can see how #first-element was positioned where we want in the layout. In this case, we moved it 100px from top and from left. You will see that the container is just wrapping #second-element, that is because the elements that are using position absolute are not taking space in the normal flow, so, all the following elements are going to fill that space
Now, we are going to play a bit with static and relative. If we add position: static to #container, and you will see that nothing happened! That is because, as we already talked, all elements has static as default positioning.
But, if we change the static value for relative, what do you think is going to happen?…. Yes, #first-element will be taking #container as a reference point, so, top and left properties will be set from #container and not from the <html> tag
4) Fixed
Elements with fixed positioning, like with absolute, are removed from the normal flow page, also, they are relative to the <html> and not any other parents. Fixed elements are not affected by scrolling.
5) Sticky
Sticky positioning is amazing, it can be thought of as a hybrid of relative and fixed positioning.
The element is positioned according to the normal flow of the document and the offset is relative to its nearest scrolling parent
The offset does not affect the position of any other elements.
You must specify at least one of top, right, bottom, or left. Otherwise, it will be like any other relative positioned element.
So, here we are, in the end. Just want to clarify that I showed the basics, there is a lot of mixes you can do to get awesome layouts, so please, be my guest and play with the known! And as I always say…
Hope It Helps!
