CSS positioning should only be used deliberately; by which I mean you should not use it unless you intend on using it. It comes in 4 types, but one of those types doesn’t ‘do’ anything: static. That’s the default value; in other words, that’s what all of your HTML is set to automatically. So let’s look at the other ones more thoroughly:
Absolute. This is the one that causes the most headaches, but is used the least frequently (phew!). Absolute positioning removes an element from the flow of the document, meaning your other HTML totally ignores its placement (in other words, your regular HTML content will overlap what you absolutely position, so you need to plan for that).
Relative. Here, you’re just asking an HTML element, ‘could you please just scoot over a teeny, tiny bit? ‘ Wherever an element naturally lands on your page according to the flow of the document, relative positioning can be used to nudge it over a few pixels relative to its original position. Hence the name. This type of positioning can also result in overlapping content.
Fixed. To have a persistent header or footer, or a fixed sidebar, this is the positioning rule to use. ‘Fixed’ means that the element does not scroll with the rest of your content – it’s fixed in place.
As mentioned, these positioning strategies can result in elements overlapping. You can control what’s on top and what’s on bottom by using the z-index. A higher value for the z-index means the element is more on ‘top.’ Z-index values are relative to the document, i.e. if you position one element with a z-index of 2, it will be on top of another element with a z-index of 1. The scale goes up to 9,999, and many developers take that as an opportunity to spread their z-index values out, like 1, 50, 100, 150, etc.