CSS Overlaying

Z-Index

The "z-index" value is specifically made for making one element appear on top of another one:

Here blue is on top of red, since it has z-index of 2, while red 1.

Site Overlaying

Sometimes websites have these features, where your whole screen is covered with a card/window-like element - its called "modal", which is good for putting your users in a still state, since it covers the whole website:

So, modals are basically used to stop users interacting with elements and start focusing on a content the website owners want to get their visitors focused on.

Dropdown Menu Z-Index

When you have a burger menu or something else to open a dropdown menu, you want to make sure it overlaps everything in its way:

Some websites do use an index of 10000 even, because it just makes sure its always on top of every element.

Tooltips Hovers

Tooltips are helpful on information websites. Typically when hovering on a word, you would get this popup, that covers anything:

Again, a high z-index is used. Also position of relative can make the element appear on other ones.