的div和溢出

Question

我有以下的div模式：

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

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

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

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

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

Answer 1

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

Answer 2

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

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