Position grandchild respect to grandparent in CSS

Position grandchild respect to grandparent in CSS

How to position the grandchild (absolute or fixed) relative to the grandparent in CSS if there is one or more parent elements in between.

·

1 min read

This article demonstrates how to position the grandchild with respect to the grandparent in CSS.

To position the grandchild relative to the grandparent, you need to set the grandparent to relative and the grandchild to absolute. The elements between the grandchild and grandparent need to be static.

If you want to position the grandchild relative to the page, you need to set the grandparent to relative and the grandchild to fixed.

For better understanding, you can check my codepen: