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

如果孩子position:absolute，父是overflow:hidden，并且父是position:static，孩子还是溢出：如果孩子的位置：绝对，父母是溢出：隐藏，为什么孩子溢出？

<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以外的位置，孩子没有再溢出：

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

为什么会发生这种情况？这种行为称为什么？

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

来源

2016-01-04 Leo Jiang

它与浏览器是一致的，如果是绝对的，一个元素将会寻找最接近的父元素（绝对或相对），并将它用作参考来绘制它自己，如果没有找到它，它将使用该窗口作为参考，会出现在前面的静态元素 –

这就是移位元件，因为该规范定义overflow作为

该属性指定是否一个块容器元件的内容当它溢出元素的框时被剪切掉。它会影响所有元素内容的剪切，除了元素（及其各自的内容和子元素），其包含的块是元素的视口或祖先之外，不包括任何后代元素。

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

解释如果元件具有position: absolute，包含块是通过已建立的用的一个absolute的position最近的祖先， relative或fixed

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

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

来源

2016-01-04 20:17:29 Oriol

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

那么这与您的问题有什么关系？我们先来分析一下position: absolute：

绝对：不要为元素留下空间。相反，将它定位在相对于其最接近的定位祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会与其他边缘一起折叠。

至于你的情况下得好，定位祖先div元素没有任何规定position属性吧。

因此，它将采用默认position: static，它除了页面中元素的标准位置外没有字面意思。检查出来：

static：这个关键字让元素使用正常的行为，也就是说，它被放置在流的当前位置。 top，right，bottom，left和z-index属性不适用。

换句话说，孩子不会相对于其父母定位。奇怪的行为是因为你期望父母div被定位时根本没有定位。它会问：什么是最近位置的父母呢？答案是在DOM树上找到它，逻辑上，因为在你的例子中没有任何东西，但是你的两个div，最近的父母将是网页文档本身。

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

编辑：溢出和Position属性：

使用overflow，你通常尝试做以下的一个（或全部）：剪辑内容，呈现一个滚动条，显示在任何溢出的内容具体做法。然而我收集你的目标是让孩子div不是溢出父母div。如何避免这种溢出的问题可以带你到一个地方你do not want to go。

所以通过缩小什么溢出是所有关于：（长话短说）它是关于控制/修改的的外观和感觉的东西是一个特殊的HTML元素里面的内容。请记住，内容，而不是元素本身。

就你而言，你可能会将父母div的子元素视为父母div的内容。相反，你真正看到的是子元素的内容。因此，父母和子女相对于彼此的定位不受overflow财产的控制，而是由position财产控制。

跨浏览器这是否一致？：

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

来源

2016-01-04 19:37:34 AGE

我知道它的位置相对于最接近的非静态元素，但我不明白为什么这会影响'溢出'。你的回答根本没有提到“溢出”。 –

@Linksku我在我的答案中添加了解释（尽我所能），* overflow *和* position *属性如何反映在您的案例中。仅供参考您的问题在堆栈溢出中多次提出，但解释其他答案还没有解释是有意义的。如果您有任何问题，请告诉我。 – AGE

谢谢，但我想你可能会误解我的问题。我并不关心div如何定位，而是关于它为什么会溢出。 Oriol的回答正是我所期待的。 –

overflow属性没有继承无论如何：http://www.w3schools.com/cssref/pr_pos_overflow.asp

因此，在你第一种情况是可以理解它是不工作的，因为静态位置的浏览器把它放在它读取和俯瞰碰撞的顺序。

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

您可以这样想象：在第一种情况下，您创建了两个彼此不相关的div，但在第二种情况下您相互之间定位，您创建了一个容器并通过设置容器的溢出强制另一个div隐藏。

希望它有助于容易理解，

安德鲁

来源

2016-01-04 19:41:01

的位置属性的相对值非常类似于静态值。主要区别在于相对值接受顶部，右侧，底部和左侧的框偏移属性。这些框偏移特性允许元件被精确地定位，从其缺省位置在任意方向

来源

2016-01-04 19:41:52

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

回答

相关问题