It’s HTML & CSS course day 12! Now about 85% through this course already: https://www.youtube.com/watch?v=G3e-cpL7ofc

In the YouTube demo the Position Absolute allows us to place the small time stamps on the thumbnails and also the notification counter on the notification bell.

My Code

position: absolute;

Below an easy example of position: absolute;. The cool thing is it fixes it according to coordinates, but different from position: fixed; it does not make it stick to the browser window. Instead it still scrolls down with the page

<div style="
position: absolute;
background-color: red;
color: white;
left: 100px;
top: 100px;
">absolute</div>

Also interesting to know is that elements that are written below appear above elements written higher up. This is super important to make sure ‘absolute’ elements actually show up and are not covered with other stuff.

Another way to also fix this is z-index: 1;. Something with a higher z-index appears in front of something with a lower z-index.

A common number is z-index: 100;, so many elements can be put inbetween

Also, when placing a position: absolute; inside a position:fixed; element it will appear relative to the latter

position: relative; also leads to the same result when placing a position: absolute; inside. Even tho the relative object itself is not fixed, the absolute one now will be relative to that. (this is not the case with position: static;, the default)

I’m actually again not sharing the YouTube code itself here because you can’t really use it without opening and downloading several files, in which case you would be better off to just directly get it from the YouTube 😊

Have a great day everyone!