Understandable. It’s a very technical article. I tried to explain it in simpler terms. I also made a JSFiddle just for you I recommend first reading through the rest of this post and then having a look at the JSFiddle: Edit fiddle - JSFiddle - Code Playground
By far the most common case is number one where you don’t set the position attribute. This means inner blocks respect the padding of the outer blocks. For example, if you increase the left padding the inner block would move to the right. containing block: content box
Case 2 tells us that when we absolutely position the inner block inside the outer block, the padding is not respected. For example, if we set top and left of the inner box to 0, the inner box will touch the border of the outer box. Changing the padding of the outer box will not affect the position of the inner box. containing block: padding box
With a fixed positioned block like in case 3 the outer block hasn’t any relevance at all. If we set top and left to 0 the inner block will stick to the top left corner of the viewport. Even if we scroll, the block won’t move out of view. containing block: viewport
Case 4 is a very special situation and I think we can ignore it.
To learn more about positioning:
I hope that helps. Just ask if you need more explanations.
Thank you so much for taking your time and making a JSFiddle just for me, this helped me a lot. Now I have a good understanding of the concept.
You’re a LIFESAVER .
I just want to elaborate on the fourth rule. It means that elements with position: fixed or position: absolute can be contained by their nearest parent element with those certain properties .
I also wrote an article to explain the concept of the containing block in more detail.