CSS Positioning
Published: 2020-09-30 19:11:14

  Let's talk about positioning today.

### Positioning

  We'll examine four position attributes we can use to manipulate the positioning of any HTML element. We have our simple Html document with a parent element and three child elements, One, Two and Three.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w5699kuqa4t26oge4wvl.JPG)

  Our Styles document is straightforward and right now it contains no custom styling.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0b3q5l3gnde7dwx2jp01.JPG)

**Static**

  The first position we'll check is the Static one. We have not defined any position attribute yet but if we check the document rendered 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/st5g5mmettewa1bjwxgi.JPG)

We can inspect the document and see the position set to static.
That is because static, is the default value given to all HTML elements' position attribute when rendered on the page.

**Relative**

  Relative positioning works almost the same as static with a simple difference. Relative will allow you to define 4 position attributes top, bottom, left and right.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c41k5p8ix7j9fuinqg9j.JPG)

And the rendering

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qisrls1vlilc2sc5tdcy.JPG)

We have the same result, but if we change any of the four attributes, top, bottom, left or right

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/553ey8utf97xppa1ke0k.JPG)

It results in

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f4qibo9zqo6djwkzevcv.JPG)

  As you can see the element changed it's positioning relative to it's static position on the page rendering flow.
So the relative position element is taken out of it's default - static - position on the document render and repositioned relatively to it's parent element without affecting any other sibling elements on the page.

**Absolute**

  Next let's check the absolute position. This one will completely remove the element from the page render flow, as if that element never existed.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e8z7ahoalej2kvpn2soz.JPG)

Renders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v0wgen6jdhlehgrd9pq0.JPG)

  This creates a unique situation when we manipulate the 4 attributes with an absolute positioned element.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5za73zxmrn7r1tztj5rv.JPG)

Renders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l8kfmj9fbecz5avjz57d.JPG)

  In the above example, the absolute element repositioned itself relative to the document, because it's parent is positioned static and ended up at the top of the page. This creates a perfect way to couple relative and absolute positioning, let's change the parents' position to relative.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vo7dfbc14myrgcnaf2at.JPG)

It renders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nghsdlim83083odbv61k.JPG)

  We can see above the absolute element repositioning itself relatively to it's parent relative position and ended up on the parent's top edge.

**Fixed**

  Fixed positioning works differently as it "fixes" the position of the element relatively to the rendered html page and it doesn't bother with parent elements. A very important thing to remember with fixed elements, is that they will stay where you place them even when the page scrolls.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6v1nhh7esakpqrbps5pn.JPG)

Renders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jiboyp7xvfv3ht64ddix.JPG)

**Sticky**

  Lastly we'll check the sticky position. It's a combination of both relative and fixed, as we can see at the examples bellow the sticky element behaves like a relative one when the page is rendered, but if the page scrolls down and that element reaches the top of the page, it will change behavior to fixed and stay at the top as the page scrolls.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jeppil5f13bxggnd2zuj.JPG)

Renders

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/so9vo2gjia6cquk0mmli.JPG)

And as the page scrolls

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yiuof9qbd11ilqkpne22.JPG)


Thank you for your time.
That's all for today,
Stay safe and Zen.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/swhe2lcsdmc31arpaiuz.jpg)