Question

如果孩子为position:absolute，父母为overflow:hidden，父母为position:static，则孩子仍会溢出：

＆＃13;

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

＆＃13;

如果父母的位置不是static，则该孩子不再溢出：

＆＃13;

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

＆＃13;

为什么会这样？这个行为叫什么？

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

Answer 1

那是因为规范将overflow定义为

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

绝对定位元素是一个后代，其包含块由元素的祖先overflow: hidden建立，如Definition of "containing block"

中所述

如果元素有position: absolute，则包含块由最近的祖先建立position absolute， relative或fixed

因此绝对定位的元素不受overflow: hidden的影响。

如果定位了父项，那么它将是绝对定位元素的包含块，然后overflow: hidden会影响它。

Answer 2

首先，仔细查看MDN文档 CSS Position 。

那么这与你的问题有何关系？我们先分析position: absolute：

绝对的：不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会随着任何其他边缘而崩溃。

就您的情况而言，定位的祖先div元素没有任何指定的position属性。

因此，它假设默认position: static，除了页面中元素的标准位置之外，它实际上只指定了它。看看：

静：此关键字允许元素使用正常行为，即它在流中的当前位置布局。 top，right，bottom，left和z-index属性不适用。

换句话说，孩子不会相对于其父母定位。奇怪的行为是因为您希望父级div在未定位时定位。它要问：最近定位的父母是什么？答案是在DOM树上找到它，逻辑上找到它，因为你的例子中没有任何内容，只有你的两个div，最近的父亲将是网页文件本身。

那么，你如何解决这个问题？通过向父position: relative元素添加（例如）div。

编辑：溢出和排名属性：

通过使用overflow，您通常会尝试执行以下一项（或全部）操作：剪辑内容，渲染滚动条，以特定方式显示任何溢出的内容。我收集的目标是让孩子div 不溢出父div。如何避免这种溢出的问题可以将您带到 do not want to go 的地方。

所以通过缩小溢出的全部内容:(长话短说）它是关于控制/修改特定HTML元素内部内容的外观和感觉< / em>的。请记住，内容，而不是元素本身。

在您的情况下，您可能会将父div的子元素视为父div的内容。相反，您实际看到的是子元素的内容。因此，父和子相对于彼此的定位不受overflow属性的控制，而是受position属性的控制。

这些浏览器是否一致？：

自CSS 2.1起，所有主流浏览器都支持overflow (visible | hidden | scroll | auto)和position (static | relative | absolute)。当您在overflow上扩展时会出现任何差异，因为某些属性未得到广泛支持。请参阅此处以供参考： Can I Use: Overflow （同时滚动到CSS 2.1参考的底部）。

您对此有任何疑问吗？请在下面的评论中提问。

Answer 3

溢出属性无论如何都不会被继承：http://www.w3schools.com/cssref/pr_pos_overflow.asp

所以在你的第一种情况下，它是不可理解的，因为在静态位置，浏览器按照它读取的顺序放置它并忽略碰撞。

在你的第二种情况下，绝对定位实际上为容器div设置了一个空间，然后将第二个div放入其中 - 从而隐藏了溢出。

你可以这样想象：在你的第一种情况下，你创建了两个div，这些div彼此不相关但在第二种情况下相互定位你创建了一个容器并通过设置容器强制另一个div进入它＃39 ; s溢出到隐藏。

希望它有助于理解，

安德鲁

Answer 4

position属性的相对值与静态值的相对值非常相似。主要区别在于相对值接受顶部，右侧，底部和左侧的框偏移属性。这些盒子偏移属性允许元素精确定位，将元素从任何方向的默认位置移动

如果孩子的位置是绝对的，父母是溢出的：隐藏的，为什么孩子会溢出？

4 个答案: