JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grandparent">
        <h1>Grandparent</h1>
        <h1>Grandparent</h1>
        <h1>Grandparent</h1>
        <h1>Grandparent</h1>
        
        <div id="parent">
            <p>The parent can be anywhere.</p>
            <div id="reset">
                <div id="child">
                    <p>Child has same position as grandparent.</p>
                </div>
            </div>
        </div>
    </div>

CSS

* { margin: 0; padding: 0; }

        #grandparent {
            width: 50%;
            margin: 0 auto;
            background-color: lightgray;
            height: 100vh;
        }

        #parent {
            width: 30%;
            margin-left: 20%;
            height: 50%;
            border: 1px solid blue;
            background-color: rgba(0,0,255,.30);
            padding: 12px;
        }

        #reset {
            position: absolute;
            left: 0;
            right: 0;
            border: 1px solid red;
            background-color: rgba(255,0,0,.30);
            padding: 12px;
        }

        #child { 
            width: 50%; /* same as grandparent */ 
            margin: 0 auto; /* same as grandparent */ 
            border: 1px solid green;
            background-color: rgba(0,255,0,.30);
            padding: 12px 0;

        }