CSS 定位子元素，不受父级和祖级 overflow:hidden 隐藏 | 技巧与示例

{"title":"CSS 基于父级定，又不想被父级与爷爷级overflow：hidden 给隐藏","description":"如果你想让子级元素基于父级定位，但又不想被父级或爷爷级的overflow: hidden属性隐藏，你可以使用position: absolute来实现。\n\n具体步骤如下：\n\n1. 确保父级元素设置了position: relative属性，这样子级元素的定位将以父级元素为参考。\n2. 为子级元素设置position: absolute属性，这样子级元素将基于父级元素定位。\n3. 如果爷爷级元素设置了overflow: hidden属性，可以将其改为overflow: visible，或者根据实际情况选择其他适合的属性。\n\n下面是一个示例代码：\n\nHTML:\nhtml\n<div class="parent">\n <div class="child"></div>\n</div>\n\n\nCSS:\ncss\n.parent {\n position: relative;\n width: 200px;\n height: 200px;\n border: 1px solid black;\n overflow: hidden; /* 可以去掉或修改为其他属性 */\n}\n\n.child {\n position: absolute;\n top: 50px;\n left: 50px;\n width: 100px;\n height: 100px;\n background-color: red;\n}\n\n\n在上面的示例中，子级元素.child基于父级元素.parent定位，并且不受父级元素的overflow: hidden属性的影响。你可以根据实际需求进行调整。"}