Question

请看一下这个小提琴https://jsfiddle.net/t2w4yd8j/1/

我对此有几个问题：

1）如果我使用相对位置，.top div（红色）和浏览器之间似乎有填充。但是，如果我将.top div（红色）的位置更改为绝对值，则填充将消失。那是为什么？

2）.next div（粉红色）应该在.main div（灰色）之后堆叠。但主要的div似乎需要更多的额外空间，即使高度设置为自动并且额外空间中没有孩子。那是为什么？

谢谢

CSS

.main{
    height:auto;
    width:100%;
    text-align:center;
    background-color:#CCC;
}
.top{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    background-color:#F00;
}
.middle{
    position:relative;
    top:-25px;
    width:100%;
    height:auto;
    text-align:center;
    z-index:3;
}
.midfill{
    width:200px;
    height:50px;
    display: inline-block;
    background-color:#0F0;
}
.bottom{
    position:relative;
    top:-50px;
    left:0px;
    width:100%;
    height:50px;
    background-color:#00F;
}

.next{
    width:100%;
    height:100px;
    background-color:#F0F;
}

HTML

 <div class="main">
        <div class="top"></div>
        <div class="middle">
            <div class="midfill"></div>
        </div>
        <div class="bottom"></div>
    </div>
    <div class="next"></div>

Answer 1

1）通过将其置于相对位置，它与它的父亲身份标签相关。从正文和HTML标记中删除填充和边距，它适合。当您放置div绝对值时，它将取出文档流，使其与视口相关。这解释了差异。

html, body { margin: 0; padding: 0; }

2）你定位div的亲戚，然后移动它们。但这个地方在父div中保留。我把div移动了一下。

html, body { 
    margin: 0; 
    padding: 0; 
}
.main{
    height:auto;
    width:100%;
    text-align:center;
    background-color:#CCC;
}
.top{
    width:100%;
    height:50px;
    background-color:#F00;
}
.middle{
    position: absolute;
    margin-top: -25px;
    width:100%;
    height:auto;
    text-align:center;
    z-index:3;
}
.midfill{
    display: inline-block;
    width:200px;
    height:50px;
    background-color:#0F0;
}
.bottom{
    width:100%;
    height:50px;
    background-color:#00F;
}

.next{
    width:100%;
    height:100px;
    background-color:#F0F;
}

Updated Fiddle

Answer 2

您的两个问题的解决方案如下。默认情况下，从身体中移除它需要额外的余量来解决您的问题：

body{
    padding:0;
    margin:0;
}

检查Fiddle Here.

有孩子没有正确堆叠的分区

2 个答案: