为什么相对定位的div会覆盖固定的div？

Question

为什么相对定位的div会覆盖固定定位的div？

以下是一个例子：

HTML（相对固定的div包装内容）

<div id="topheading">
    Example Example Example Example Example Example Example Example
</div>
<div class="main">
<div class="centerpage">
        <div class="contentbox1">
            Test
        </div>
        <div class="contentbox1">
            Test 2
        </div>
        <div class="contentbox1">
            Test 3
        </div>
</div>
</div>

CSS

#topheading {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 58px;
    width: 100%;
    background-color: rgba(194, 194, 194, .5);
}

.main {
    position: relative;
    width: 100%;
}

.centerpage {
    width: 99%;
    background: #ccc;
    overflow: hidden;
    margin-top: 62px;
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
}

.contentbox1 {
    float: left;
    width: 99%;
    background: #448;
    min-height: 200px;
    border: solid black 2px;
}

JSFiddle

当您向下滚动时，固定定位的div会被相对定位的div覆盖;怎么样？

Answer 1

我相信这是因为div的z-index是由它们被解析的顺序隐式设置的。也就是说，

<div class="main">
    <div class="centerpage">
        <div class="contentbox1">
            Test
        </div>
        <div class="contentbox1">
            Test 2
        </div>
        <div class="contentbox1">
            Test 3
        </div>
    </div>
</div>
<div id="topheading">
    Example Example Example Example Example Example Example Example
</div>

似乎可以解决您的问题。

编辑：虽然正如其他人所说，解决这个问题的更有表现力的方法是使用z-index。

#topheading {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 58px;
    width: 100%;
    background-color: rgba(194, 194, 194, .5);
    z-index:1;
}