添加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值。

Answer 2

在示例代码中，问题是由于此css -

引起的

#contentShowcase{
    height:92vh;
}

您会看到div#contentShowcase位于您设置section的{​​{1}}内，但当您在子div height: 92vh上设置height: 92vh时， div超出#contentShowcase的边界，因此section的部分低于下一个div

see this fiddle使用您的原始代码，我添加了一个绿色边框来说明它是如何离开section的 现在see this fiddle已删除section

所以请停止在height内的height vh设置div section height vh %中public void actionPerformed(ActionEvent arg0) { LineNumberReader LineReader = null; try { LineReader = new LineNumberReader(new FileReader("C:/Documents and Settings/Josip/Desktop/PROGRAMING MOTHAFUKAZ/JAVA/Login/DataBaza.txt")); } catch (FileNotFoundException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } String UserName = username.getText(); System.out.println(UserName); try { String Line = LineReader.readLine(); while(Line != null){ UserName = username.getText(); System.out.println(Line); Line = LineReader.readLine(); if(Line == UserName){ System.out.println("LOGIN SUCCESFUL"); } } } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } {1}}而不是。