Day 11 - Digging Deeper into CSS - Positioning
Tags: html, css, codenewbie
Published: 2019-11-07 03:41:51

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](https://alistapart.com/article/css-positioning-101/) and it clarified some things.

Positioning relates to the <code>position</code> property in CSS. This property helps align elements in the layout. There are five values <code>static</code>, <code>relative</code>, <code>absolute</code>, <code>fixed</code> and <code>sticky</code>.

They also have offset properties such as <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> and <code>z-index</code>. These properties do not work if you don't declare a position or if the position is <code>static</code> as it is the default position.

<code>z-index</code> is a way to represent the order of the elements. If you want to push an element before another element you would use the <code>z-index</code>. The higher the value of this property, the more forward the element will be.

Let's go through the <code>position</code> 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 <code>position:relative</code>.

a) Whatever element you set to <code>position:relative</code> 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 <code>position:relative</code> is that when you set it to a parent element, it creates a [coordinate system, a reference point for offset properties](https://alistapart.com/article/css-positioning-101/), for the child element. This means that if I use the offset property <code>left: 100px;</code> 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 <code>absolute</code> 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 <code>absolute</code> is relative to its parent element. To break this down, if you have the following:

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


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 <code>position: static</code>, the child element will look out for the next element set to <code>relative</code> until it reaches the document.

You can see a little exercise I did on [CodePen](https://codepen.io/Joelle8701/pen/LYYmbEJ?editors=1100).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/70hjib9v9glojd4fmu71.png)


**Fixed**

This is similar to <code>absolute </code> but they are relative only to <code>html</code> 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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/61j0vuswg9whwoenitqi.png)


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

For example:

<code>position:sticky;
top:0;</code>

At first the element is <code>relative</code> 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!