位置绝对和溢出隐藏

Posted 2023-03-05

【中文标题】位置绝对和溢出隐藏

【英文标题】：Position absolute and overflow hidden

【发布时间】：2011-06-04 02:12:34

【问题描述】：

我们有两个 DIV，一个嵌入另一个。如果外层 DIV 不是绝对定位，则内层 DIV 是绝对定位，不服从外层 DIV 的溢出隐藏 (example)。

有没有机会让内部 DIV 服从外部 DIV 的溢出隐藏而不将外部 DIV 设置为绝对位置（因为这会破坏我们的完整布局）？ 此外，我们的内部 DIV 的相对位置也不是一个选项，因为我们需要从表 TD (exmple) 中“长出来”。

还有其他选择吗？

【参考方案1】：

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

【参考方案2】：

将外部<div> 设置为position: relative，将内部<div> 设置为position: absolute。它应该适合你。

【讨论】：

谢谢你们俩。我一直认为 position:relative 是默认值。我刚刚了解到静态是默认设置。我接受 shankhan 的回答，因为这两个答案是等价的，而 shankhan 需要更多积分；-)

一些解释和/或文档将是一个很好的补充。

【参考方案3】：

你只需像这样制作divs：

<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>

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

【参考方案4】：

绝对定位元素实际上是相对于relative 父级或最近找到的相对父级定位的。所以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; 

【参考方案5】：

确定。

父位置相对。 父级已手动分配宽度和高度（作为具有绝对位置的子元素很重要）。 子位置绝对；

.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>