"position: fixed" relative to parent

We all know that position: fixed is relatively to the window, right? Well, no. We can put it inside a position: relative element.

What is good for? It's a good question 😄

It's good if we want to put a "floating" element inside a another element.

For example, we want the the green square will stick to the right red square. We can try this:

The problem

we want the the green square will stick to the right red square

The solution

We can wrap the "fixed" element with another div and set it as position: absolute and right: 0:

Imprtant! Be careful. It's hack and the position: relative doesn't work as expected. For example, if we set width: 100% to the "fixed" element, it will get the window's width.