CSS 定位技巧：使用 position: fixed 避免 overflow: hidden 隐藏子元素

<style>
    .grandfather {
        height: 200px;
        width: 200px;
        background-color: yellow;
        overflow: hidden;
    }

    .father {
        position: relative;
        height: 100px;
        width: 100px;
        background-color: red;
        top: 50px;
        left: 50px;
    }

    .child {
        position: fixed;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div class="grandfather">
    <div class="father">
        <div class="child"></div>
    </div>
</div>
<p>在上述示例中，爷爷级元素 <code>.grandfather</code> 设置了 <code>overflow: hidden</code>，但子元素 <code>.child</code> 使用了 <code>position: fixed</code> 来定位，这样就不会被 <code>.grandfather</code> 隐藏。</p>
<p>使用 <code>position: fixed</code> 定位可以让子元素相对于浏览器窗口进行定位，不受父级元素的影响，因此即使父级或爷爷级元素设置了 <code>overflow: hidden</code>，子元素也能正常显示。</p>
<p><strong>总结：</strong></p>
<p>使用 <code>position: fixed</code> 可以帮助你解决在层级关系中，由于 <code>overflow: hidden</code> 属性导致子元素被隐藏的问题。</p>
<p><strong>注意：</strong></p>
<p>使用 <code>position: fixed</code> 时，需要注意子元素的定位方式和浏览器窗口的尺寸，以确保子元素能够正确地显示在页面中。</p>