如果使用绝对定位设置子元素，为什么忽略溢出隐藏？

Question

如果实现以下内容，将忽略

隐藏溢出：

• 溢出的子元素具有绝对定位
• 隐藏溢出的父级具有静态定位
• 添加了具有相对定位的第二个父包装

为什么尽管父应用了溢出隐藏应用会发生这种情况？

HTML

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

CSS

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

FIDDLE http://jsfiddle.net/vLsmmrz6/

Answer 1

这是因为绝对定位的div .overflowd相对于.outer-wrapper，而不是wrapper。那么它发生了什么并不是溢出，而是它的正常行为。

如果您的position:absolute元素具有position:relative的祖先或更多元素，则相对于具有position:relative的最近祖先

，它将保持绝对

例如，在下面的代码段中。我添加了另一个包装器。如果我设置位置：相对于那个包装器，它就不重要了，因为绝对div的更近的祖先有位置：relative。

如果您移除位置：相对于outer-wrapper并保持位置：相对于新包装.more-wrapper，绝对div将移动并保持绝对相对于more-wrapper

希望我能解释清楚

＆＃13;

＆＃13;

.outer-wrapper {
  position: relative;
  padding: 100px;
  background: white;
}
.more-wrapper {
  position:relative;
  background:red;
  padding:100px;
}
.wrapper {
  overflow: hidden;
  height: 200px;
  background: darkblue;
}
.overflowed {
  position: absolute;
  width: 50%;
  background: lightblue;
  padding: 50px;
  top: 50px;
  left: 50px;
  font-family: sans-serif;
}

＆＃13;

<div class="more-wrapper">


<div class="outer-wrapper">
  <div class="wrapper">
  <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

通过简单的谷歌搜索找到了答案。你可以在这里阅读更多＆gt; css position

  

位置为绝对的元素;相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

     

然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。

     

注意：A＆＃34;定位＆＃34; element是一个除静态以外的任何位置的元素。