html - div 和溢出

Question

我有以下 div 模式：

<div id="red">
   <div id="green">
       <div id="blue"></div>
       <div id="blue"></div>
   </div>
 </div>

*红色：集中整个页面，位置：绝对

*绿色：子面板位置：绝对

*蓝色：子面板位置：绝对！

为什么蓝色面板溢出然后绿色面板？我不想在蓝色面板中使用高度？

Answer 1

元素position: absolute被从布局流中取出，因此它们不会影响其他元素的位置。所以，如果你有一个容器，里面有一个 div ，而内部 div 有position: absolute，它的高度不会被通知给父级，并且容器将作为空容器，除非你明确地给它高度。

附注：ID 必须是唯一的，不能有两个具有相同 ID 的元素，就像使用blue. 改用类。

Answer 2

您可以设置高度和溢出：以绿色隐藏，这应该隐藏任何孩子，包括蓝色。但是，蓝色有position:absolute属性允许他们溢出他们的父母。position:relative如果要隐藏在其中，则需要更改为绝对位置或绝对位置以外的其他位置。