绝对位置和隐藏溢出

Question

我们有两个 DIV，一个嵌入另一个中。如果外部 DIV 不是绝对定位的，则绝对定位的内部 DIV 不遵守外部 DIV 的溢出隐藏。

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 250px;
    top: 250px;
}

<div id="first">
    <div id="second"></div>
    <div id="third"></div>
</div>

是否有机会使内部 DIV 服从外部 DIV 的溢出隐藏，而不将外部 DIV 设置为绝对位置（因为这会弄乱我们的完整布局）？ 此外，我们的内部 DIV 的相对位置也不是一个选项，因为我们需要“扩展”表 TD。

#first {
    width: 200px;
    height: 200px;
    background-color: green;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: relative;
    left: 0px;
    top: 0px;
}

<table id="first">
    <tr>
        <td>
            <div id="second"></div>
        </td>
    </tr>
</table>

还有其他选择吗？

Answer 1

你只需像这样制作 div：

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

我希望这段代码能帮助你:)

Answer 2

将外部

设置为 position:relative，将内部

设置为 position:absolute。它应该适合你。

Answer 3

外部 div 的 position:relative 怎么样？在隐藏内部的示例中。它也不会在布局中移动它，因为您没有指定顶部或左侧。

Answer 4

绝对定位的元素实际上是根据相对父元素或最近找到的相对父元素来定位的。因此带有 overflow:hidden 的元素应该位于 relative 和 absolute 定位元素之间：

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Answer 5

确保。

1. 相对父位置。
2. 父元素手动分配宽度和高度（重要的是子元素具有绝对位置）。
3. 子位置绝对；

.outer{
   position:relative;
   width:200px; 
   height:100px;
   overflow:hidden;
}

.inner{
   position:absolute;
   width:100px;
   height:100px;
   font-size:3rem;
}

<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>

}

Answer 6

径向背景渐变遇到了这个问题。如果上述解决方案剪切了元素的部分内容，只需应用相对于 html 正文而不是直接父级的位置。

body {
  position: relative;
  overflow-x: hidden;
}