HTML-Elemente überlappen

Question

So verwende ich Hero Image für meine Website, die 100 VH hoch ist. Jetzt ist das Bild absolut positioniert, so dass ich andere Elemente wie Logo, Nav und Text relativ zum Bild positionieren kann. Nach diesem Abschnitt möchte ich einen neuen Abschnitt mit neuem Bild und anderem Text beginnen, aber sobald ich eine neue Zeile, Spalte starte und versuche, ein neues Bild mit h1-Text einzufügen, versteckt es sich hinter dem früheren Bild. Was ich meine ist, dass ich einen neuen Abschnitt mit neuem Bild und <h1> Text unter dem Heldenbild anzeigen möchte und nicht überlappen oder darunter verstecken, wie es sich jetzt versteckt. Es ist nicht schwebend oder irgendetwas, meine Wagen sind geräumt, also verstehe ich es nicht, warum ist das so?

Hier ist ein Codepen, also würden Sie verstehen, was hapenning ist.

<div class="container-fluid clearfix"> 
    <div class="row"> 
     <div class="col-lg-12"> 
    <div class="hero_img"> 
     <img class="logo" src="assets/logo.png"></img> 

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse"> 
☰ 
</button> 
     <div class="collapse"> 
     <div class="col-xs-12"> 
     <ul class="nav"> 

     <li class="nav-item"> 
      <a class="nav-link" href="#">Lorem</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Lorem</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Lorem</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Lorem</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
    <div class="black_box clearfix"><h1>Kolding Bike Marathon</h1></div> 
    <div class="black_box_sub clearfix"><p>Bring activity to your life again</p></div> 

    <button type="button" class="btn btn-outline-secondary">Register now</button> 
    <button type="button" class="btn btn-success">Learn more</button> 

    </div> 

</div> 
</div> 
</div> 
</div> 

     <div class="section_one"> 
     <h1>heyyyyy</h1> 
    </div> 



.hero_img { 
    background-image: url("assets/hero.jpg"); 
    width: auto; 
    height: 100vh; 
    background-size: cover; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    overflow: hidden; 
    clear: both; 
} 



.hero_img { 
    width: 100%; 
    height: 100vh; 
    position: absolute; 
    top: 0; 
} 

.logo { 
    position: relative; 
    left: 20px; 
    top: 20px; 
    z-index: 1002; 
    width: 5%; 
    min-width: 50px; 
} 

.nav { 
    position: relative; 
    top: 0; 
    z-index: 1000; 
    margin-top: 20px; 
    /*margin-right: 15px;*/ 
    padding: 20px; 
    /*float: right;*/ 
    width: auto; 
    flex-direction: column; 
    background: #555; 
    /*width: 100%;*/ 
    filter: opacity(0.93); 
} 

a { 
    text-decoration: none; 
    color: white; 
    display: block; 
    border-bottom: 1px solid #444; 
} 

a:hover { 
    color: #999; 
} 

.nav-item { 
    display: block; 

} 

.navbar-toggler { 
    /*float: right;*/ 
    display: flex; 
    justify-content: right; 
    position: relative; 
    z-index: 1000; 
    margin-top: 15px; 
    margin-right: 15px; 
    color: white; 
    float: right; 
} 

.black_box { 
    position: relative; 
    width: 45%; 
    min-width: 400px; 
    text-align: center; 
    z-index: 1000; 
    background: black; 
    margin-top: 10%; 
    padding: 10px 30px; 
    clear: both; 

} 

.black_box h1 { 
    color: white; 
    /*font-family: 'PT Sans', sans-serif;*/ 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 600; 
    letter-spacing: 1.5px; 

} 

.black_box_sub { 
    position: relative; 
    width: 30%; 
    min-width: 310px; 
    text-align: center; 
    z-index: 1001; 
    background: black; 
    margin-top: 2%; 
    clear: both; 
    margin-left: 90px; 
} 

.black_box_sub p { 
    color: white; 
    padding: 5px 25px; 
    font-family: 'Montserrat', sans-serif; 
    text-transform: uppercase; 
    padding-top: 10px; 
    padding-bottom: 0px; 

} 

Codepen: http://codepen.io/Limpuls/pen/NpbwYp

Answer 1

Es gibt mehrere Elemente in dem Code zu bereinigen, aber die Bilder, um zu verhindern überlappende Sie beide Einträge der Position entfernen: absolute; aus der Klasse .hero_img.

Entfernen Sie danach das Padding links und rechts von allen Medienabfragen von container-fluid. Dies kann Auswirkungen auf andere Container haben, die in diesem Container benötigt werden, aber es wäre ein schneller Weg, um das zu tun, was Sie fragen.