Position grandchild respect to grandparent in CSS

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: