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.
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 
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. 
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.
Have a nice day,
Michael
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 
.
Thanks Again mate 
Disney
I’m glad I could make it understandable and thank you for the kind word. 