Day 11 - Digging Deeper into CSS - Positioning

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 static, relative, absolute, fixed and sticky.

They also have offset properties such as top, right, bottom, left and 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:

Static

This is the default of all elements and they will remain in their normal flow.

Relative

From what I understand, there are two things that are happening with position:relative.

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.

Absolute

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:

.parent-element {
position: relative;
width: 200px;
height: 200px;
}
.child-element {
position: absolute;
left: 100px;
width: 200px;
height: 200px;
}

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.

Fixed

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.

Sticky

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:relative and position: fixed depending on the scroll. You must also use the offset property to tell the element where to stick.

For example:

position:sticky;
top:0;

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!