html - 添加VH后图像与Div重叠

我目前正在尝试设置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>

最佳答案

您可以使用z-index以某种分层样式正确设置事物。

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

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

关于html - 添加VH后图像与Div重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32179537/