Positioning, what can I say?
Every time I think that I got it, I get confused some more. This time, I went through another A List Apart article and it clarified some things.
Positioning relates to the
position property in CSS. This property helps align elements in the layout. There are five values
They also have offset properties such as
z-index. These properties do not work if you don't declare a position or if the position is
static as it is the default position.
z-index is a way to represent the order of the elements. If you want to push an element before another element you would use the
z-index. The higher the value of this property, the more forward the element will be.
Let's go through the
position properties now:
This is the default of all elements and they will remain in their normal flow.
From what I understand, there are two things that are happening with
a) Whatever element you set to
position:relative will now have access to the offset properties and you will be able to use them to move the elements around.
b) Another exciting thing with
position:relative is that when you set it to a parent element, it creates a coordinate system, a reference point for offset properties, for the child element. This means that if I use the offset property
left: 100px; on the child element, the reference point will be the parent element and not the document (the body). This child element will be pushed 100px from the left of the parent element.
Setting the position to
absolute will remove the element from the normal flow and other elements will act as if it's not on the webpage.
One key thing to remember is that an element that is positioned
absolute is relative to its parent element. To break this down, if you have the following:
The child element will be positioned 100px from the left of the parent element. If the parent element does not have a position or if the position is
position: static, the child element will look out for the next element set to
relative until it reaches the document.
You can see a little exercise I did on CodePen.
This is similar to
absolute but they are relative only to
html and will not react to any parent element. It takes the element out of the normal flow and you can use the offset properties to set where the element stays.
I had to do a bit more reading about that. The main thing to understand about this position is that it is based on the user's scroll position. It is a mix of
position: fixed depending on the scroll. You must also use the offset property to tell the element where to stick.
At first the element is
relative meaning in the normal flow based on the HMTL placement. As the user scroll past that element, it goes to the top of the page and stay there. If the user scrolls the other way, it goes back to the usual HTML placement.
That's it for today, the streak continues!