如果孩子是位置：绝对和父是overflow：hidden，为什么孩子溢出？ [英] If the child is position:absolute and the parent is overflow:hidden, why does the child overflow?

问题描述

如果子元素 position：absolute ，则父元素为 overflow：hidden ，父元素为 position：static ，子项仍会溢出：

If the child is position:absolute, the parent is overflow:hidden, and the parent is position:static, the child still overflows:

<div style="overflow:hidden;height:100px;border:2px solid red;">
  <div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
  </div>
</div>

具有 static 以外的位置，则子不再溢出：

If the parent has a position other than static, the child no longer overflows:

<div style="overflow:hidden;height:100px;border:2px solid red;position:relative;">
  <div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
  </div>
</div>

发生？这个行为叫什么？

Why does this occur? What is this behavior called?

我使用Chrome，这种行为在不同浏览器中是否一致？

I'm using Chrome, is this behavior consistent across browsers?

推荐答案

这是因为规范定义了 overflow

That's because the spec defines overflow as

此属性指定块容器元素的内容
当它溢出元素的框时被剪切。它影响所有元素的内容的
剪辑，除了任何后代
元素（及其相应的内容和后代），其
包含块是视口或元素的祖先。

This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

绝对定位的元素是一个后代，它的包含块由元素的祖先建立， overflow：hidden ，如包含块的定义中所述

The absolutely positioned element is a descendant whose containing block is established by an ancestor of the element with overflow: hidden, as explained in Definition of "containing block"

如果元素具有 position：absolute 是由具有位置的最近祖先建立的
绝对，
relative 或固定

绝对定位的元素不会受到 overflow：hidden 的影响。

Therefore the absolutely positioned element is not affected by that overflow: hidden.

如果父节点定位，包含绝对定位的元素的块，然后 overflow：hidden 会影响它。

If the parent were positioned, it would be the containing block of the absolutely positioned element, and then overflow: hidden would affect it.

这篇关于如果孩子是位置：绝对和父是overflow：hidden，为什么孩子溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！