Question

我有3个DIV。中间包含两个DIV。中间div内的两个DIV应该出现在彼此之上。我已经对这个概念做了一个示例：sample

<div style="background-color:blue; width:100%; height:100px;"></div>
<div style="width:100%; height:100px; background-color:green">
    <div style="background-color:red; width:100%; height:100px; position:absolute; z-index:0;"></div>
    <div style="background-color:yellow; width:100%; height:100px; position:absolute; z-index:1;"></div>
</div>
<div style="background-color:blue; width:100%; height:100px;"></div>

所有DIV的宽度都是100％，但我不知道为什么，但中间的div比其他的大。那是为什么？

Answer 1

中间（黄色）较大，因为它设置了position:absolute。这意味着当它计算宽度（100％）时，计算基于最近的祖先设置position。由于没有父div有这个，它从body元素获取它，默认情况下定义了填充/宽度，导致意外的宽度计算。

您可以通过以下方式纠正此问题：

body{
    padding:0;
    margin:0;
}

或者将position:relative添加到父元素。虽然您可能还想从padding

中删除body

Demo Fiddle

Answer 2

试试这个

<div style="background-color:blue; width:100%; height:100px;"></div>
<div style="width:100%; height:100px; background-color:green">
<div style="background-color:red; width:100%; height:100px;  z-index:0;"></div>
<div style="background-color:yellow; width:100%; height:100px;  z-index:1;"></div>
</div>
<div style="background-color:blue; width:100%; height:100px;"></div>

错误的HTML DIV宽度

2 个答案:

Demo Fiddle