CSS positioning: absolute is absolute relative
Tags: css, html, positioning
Published: 2021-09-29 22:21:07

If you ever had problems using the CSS position feature, maybe you are not alone. In theory, things are dead [simple](https://www.w3schools.com/css/css_positioning.asp):

There are five different values to control object positioning in CSS:

> static
> relative
> fixed
> absolute
> sticky

In practice, things are not that simle, as the position property also influences the page layout:
- a relative position moves the element, but still consumes some space in the original position.
- an absolute or fixed position moves the element, but does not consume any layout space. 

So, let´s try out how it works. I created an [example](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8AQgAiAeQDCAFQCaABQCiAAnZQAfAB06gtcqgM6AcwC8mkEgjmtdbbogMkN5csHN4DZbCwMATpHgzEABXeBIAWgAOa20XQXgyeBh1BKSIQQB6VOTY13dPRmYggDcyCAB3AAduX3hzL15+QPNysiR4LBNLUtgIcNb2rEJlMjpEsgYocLBYSYgTAEYMAAYYujiweABPHPWXZSQyYuVgXP3lEkbwkiYKLdRlAEFfCahhgAloYogE2eGwQxgaYQF4kADcZ32ACMapZfA8wNwoG1lAAmSoAD2UUIMsAA1hC9ucYRjpj4kNxyg8AMyY5S0rEAFjpRl8DC2hPOLihDHxrO4wToSHCPCgNQeviMPIAFKiAKxy4byxVohXDZYYRkASk5XNwfiMowe6IxuvO8G4lQeCzly0xZv2MBI8GttvtkIAvtpIRhylhEhATpCXAMOsblnbTcHVBAyEYcOHIw6vbYicoML5kEG09zeXj+YLhaLxcpM0gHSG2mHlABOJPRrCx+Mu5QLCPutMpn2siAQdanHPYvMFoUipElnt9ivKUNYa3tqODxtxhO1+ud71pjPQBgJb4napgca8CU7vcQMEp84YBhQxFQUKB4CH490B63++Py8+8gYrP7Z9uCPBITwuMg-3LfYr32DBNjIfEtgAl8QLfZQ4IQsEXGgzJNh2CAbEyRtHBsOwYSQLZnFcQ5jlgAwwDAII-QDaxqIWSFBGorw6IY8wy2UawDiOVFXAyajKMyMTcg4o4uIYejGP9RAWKOal2M42i5J4kBJ1sEB1EE4pGREyS9gko5xMqNDthgIJl2bB463rPTMkqCz1EUAA5UQXIIjIyIozdCLwDROEgGAEDIXgqHQG1UAWSIQA9Qh6CYFh0AwAArKhiB4Pg+3gVhEuSkBCjSzBYHozhcqaQqPQAXQ9IA) to try this. Some explanations on the code: 

```css
<style>
    div {
      ...
      top: 150px;
      left: 150px;
    }

    .white {
      width: 200px;
      height: 200px;
    }

    .red {
      background-color: red;
      width: 90px;
      height: 100px;
    }

    .green {
      background-color: green;
      width: 100px;
      height: 90px;
    }

    .relative {position: relative;}
    .absolute {position: absolute;}
    .fixed    {position: fixed;   }
    .sticky   {position: sticky;  }
  </style>

```
There is a `top` and `left` set for all div´s. As long, as you do not apply a position property to the `<div>` the values are ignored. There are three types of `<div>´s` used:

- A big white box
- A small red box 
- A small green box

Green and red have a different size to show overlapping elements. So, now we create the elements:
```js
<body>
    <div class="white">div1
      <div class="red "> div2 </div>
    </div>
    <div class="white">div3
      <div class="green"> div4 </div>
    </div>
    <p style="height: 900px;"></p>
    <p>END</p>
  </body>
```
This will create two white boxes with a colored box inside, all elements are placed automatially to the next free space:

{% codepen https://codepen.io/Eckehard/pen/ZEyPbLy default-tab=html,result %}

Now, we can add some positioning:
```js
<body>
  <div class="white">div1
    <div class="red absolute"> div2 </div>
  </div>
  <div class="white">div3
    <div class="green absolute"> div4 </div>
  </div>
  <p style="height: 900px;"></p>
  <p>END</p>
</body>
```
Like expected, the inner boxes are moved out to an absolute position.

{% codepen https://codepen.io/Eckehard/pen/wveOKea default-tab=html,result %}

Now, add some positioning to the outer div´s. Here we set div3 to "absolute":

{% codepen https://codepen.io/Eckehard/pen/wveOKXG default-tab=html,result %}

What happend? The green box is not absolute anymore, it is positioned relative to it´s parent. Some [reseach](https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent) tells us, that absolute position in CSS is only absolute, as long as the parent does not have any position set. In that special case, the body is used as the ancor. 

If you set any positioning on a **parent** (maybe also, relative with an offset of (0/0)), then absolute means absolute relative to the relative parent... . Must have been a very nice evening when they invented this - everybody was drunk!

A nice surprise happens, if you set the first box to absolute:

{% codepen https://codepen.io/Eckehard/pen/rNwROYp default-tab=html,result %}

Now, the first white box is removed from the layout making the second box get shifted. As a result, the whole layout get´s mixed up.

You will find more strange results using fixed or sticky positioning in various combinations, please try out. 

{% codepen https://codepen.io/Eckehard/pen/VwWRvyR default-tab=html,result %}

The main thing to remember is:

###Absolute positioning will become relative, if the parent has any position set.

Anyway, controlling the layout with the position property in nested objects is always an adventure! Hope this helps to understand the rules.