How to identify the containing block

MDN Learn
,
#1

Hey everyone.

I would Like some help if possible some graphical representation, so I could understand how to identify the containing block.

I was reading through some documentations But I could not understand what they were talking about.

Here is the link

Thanks again for the help.

#2

Hi @Disney

Understandable. It’s a very technical article. I tried to explain it in simpler terms. I also made a JSFiddle just for you :slightly_smiling_face: I recommend first reading through the rest of this post and then having a look at the JSFiddle: https://jsfiddle.net/cn74uk0g/2/

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. :arrow_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. :arrow_right: 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. :arrow_right: 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.

Have a nice day,
Michael

#3

Hi Michael

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 :grin:.

Thanks Again mate :raised_hands:
Disney

1 Like
#4

I’m glad I could make it understandable and thank you for the kind word. :blush:

#5

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.