What is the purpose of giving a div father in css a position relative and childs in it a position absolute?

Question

I have a problem with this i cant understand what is the purpose and qhat will happen if we do it.

I did try it but i didnt understand it.

Answer 1

You have to imagine it a bit like in the coordinate system. What is positioned absolutely works like in a typesetting or illustration programme. The coordinate system of an absolutely positioned box is the HTML document. An asbsolutely positioned block is not interested in the other elements of the page and the rest of the page ignores the block completely. So all other content that is not also absolutely positioned runs behind or in front of the box. An absolutely positioned block always needs a width and a height.

The coordinate system for the relatively positioned block is the position of the block in the content of the page (for an absolutely positioned block, the HTML document, not the position in the page). This is what is relative about relative positioning.

If the block is the first element in the document, there will be no difference to the absolutely positioned box. But if elements appear before the relative block, the block slides down with the contents.

What is behind the box in the HTML document will very well take care of the box and appear behind it. So far, so easy. But now it gets interesting.

Relative positioning becomes interesting when absolutely positioned elements lie in a relatively positioned block: If an absolutely positioned element lies in a block with position:relative, this block becomes its coordinate system. Its coordinates top, right, bottom and left refer to the relatively positioned block.

So you can summarise:

• Absolute positioning is suitable for fixed size content (e.g. images in a slideshow).
• A relatively positioned block is a great container for absolutely positioned elements that are animated via CSS or Javascript (e.g. expanding boxes for navigation or tabs or slideshows at the top of the page).