Les éléments HTML se chevauchent

Question

Donc j'utilise une image de héros pour mon site Web qui est 100 vh de haut. Maintenant, l'image est positionnée absolument, donc je pourrais positionner d'autres éléments comme le logo, la navigation et le texte sur l'image par rapport à elle. Après cette section, je veux commencer une nouvelle section avec une nouvelle image et un autre texte, mais une fois que je lance une nouvelle ligne, une colonne et que j'essaie de mettre une nouvelle image avec du texte h1, elle se cache derrière l'image précédente. Ce que je veux dire, c'est que je veux une nouvelle section avec une nouvelle image et que le texte <h1> apparaisse sous l'image du héros et ne le recouvre pas ou ne se cache pas sous lui comme il se cache maintenant. Ce n'est pas flottant ou quoi que ce soit, mes flotteurs sont effacés, donc je ne comprends pas pourquoi est-ce hapenning.

Voici un peu de codepen pour que vous compreniez ce qui est hapenning.

<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

Il y a plusieurs éléments à nettoyer dans le code, mais pour garder les images de vous pouvez supprimer les deux se chevauchent entrées de position: absolute; de la classe .hero_img. Ensuite, retirez le rembourrage à gauche et à droite de toutes les requêtes de fluide du conteneur. Cela peut affecter et d'autres remplissage qui était nécessaire dans ce conteneur, mais serait un moyen rapide de faire ce que vous demandez.