html - 添加VH时图像重叠Div

Question

我目前正在尝试设置 div 部分，以便它们占用大约 95vh 的网页。

问题是，当我将 vh 添加到其中一个部分时，下一部分的图像会与上一部分重叠，从而遮挡了一些内容。

所有的 div 都有相对定位，只有当我向 div 添加 vh 时才会发生这种情况。

section#showcase{
    height:92vh;
}
#contentShowcase{
    height:92vh;
}
section#judging {
    margin-bottom: 50px;
    height: 90vh;

}
section#judging #contentEnter {
    margin-top: 50px;
    height:350px;
}
#judgingImg {
    background: url('../images/beyond-2015-city.jpg') no-repeat 0 0;
    background-size: cover;
    height:50vh;

}
/* Section Content */
section#mainContent, 
section#mainContentEnter, 
section#mainContentAttend, 
section#gobeyond, 
section#event, 
section#eventInfo, 
section#enter, 
section#attend, 
section#judging, 
section#sponsors, 
section#venue, 
section#showcase,
section#form,
#eventQuote, 
#judgingImg, 
#sponsorsImg, 
.contentBlock {
    width: 100%;
    min-width: 100%;
    display: block;
    position: relative;
}
#scrolltoBeyond2015, #scrolltoEvent, #scrolltoShowcase, #scrolltoJudging, #scrolltoVenue {
    padding-top: 68px;
    margin-top: -68px;
    display:block;
}





 <section id="showcase" class="">
                <a id="scrolltoShowcase"></a>    
                <div class="chevronDown chevDkBlue hidden-lg hidden-md"></div>

                <div id="contentShowcase" class="row col-DarkBlue bkgrd-LtAccentBlue">
</div>
</div>
</section>
  <section id="judging">
            <a id="scrolltoJudging"></a>
            <a class="chevronDown chevtntBlue" href="#scrolltoJudging"></a>
            <div id="judgingImg"></div>
</section>

Answer 1

您可以使用 z-index 以一种分层样式设置正确的内容。

section#showcase {
   height: 92vh;
   z-index: 100;
}
#contentShowcase {
   height: 92vh;
   z-index: 80;
}

在这种情况下，section#showcase 将位于 #contentShowcase 的顶部，因为它具有较高的 z-index 值。