Изображения перекрытия рухнули navbar

Question

Я не мог найти ничего подобного в Интернете, поэтому я прошу вас, ребята! Проблема в том, что мои значки перекрывают мой рухнувший навигатор.

Мой код:

<div class="container-fluid"> 
            <div class="row"> 
             <div class=""> 
              <div id="black"> 
              <nav class="navbar navbar-default navbar-inverse" role="navigation"> 
               <div class="container-fluid"> 
               <!-- Brand and toggle get grouped for better mobile display --> 
               <div class="navbar-header"> 
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
                 <span class="sr-only">Toggle navigation</span> 
                 <span class="icon-bar"></span> 
                 <span class="icon-bar"></span> 
                 <span class="icon-bar"></span> 
                 </button> 

                 <a class="img-responsive col-xs-4 col-sm-8 col-md-10 col-lg-12" href="#"> 
                 <img id="logo2" alt="Logo" class="" height="80%" width="73%" src="images/logo1.png"> 
                 </a> 
               </div> 

<div class="container-fluid"> 
       <div class="row"> 
        <div class=""> 
         <div id="black"> 
         <nav class="navbar navbar-default navbar-inverse"        role="navigation"> 
          <div class="container-fluid"> 
          <!-- Brand and toggle get grouped for better mobile display --> 
          <div class="navbar-header"> 
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
            <span class="sr-only">Toggle navigation</span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            </button> 
            <a class="img-responsive col-xs-4 col-sm-8 col-md-10 col-lg-12" href="#"> 
            <img id="logo2" alt="Logo" class="" height="80%" width="73%" src="images/logo1.png"> 
            </a> 
          </div> 

<!-- Navbar contentas --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a class="visible-lg" href="#">Pagrindinis</a></li> 
     <li><a class="visible-lg" href="#">Kontaktai</a></li> 
     <li><a class="visible-lg" href="#">Apie mus</a></li> 
     <li><a class="visible-lg" href="#">Paslaugos</a></li> 
     <li><a href="#"></a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#"></a></li> 
      <li><a href="#">Pagrindinis</a></li> 
      <li><a href="#">Apie mus</a></li> 
      <li><a href="#">Kontaktai</a></li> 
      <li><a href="tel:+" onclick="ga('send', 'event', { eventCategory: 'Mygtukas', eventAction: 'Telefonas'});">+370 67651008</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><p class="navbar-text" style="margin-left: 15px;" >Already have an account?</p></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a> 
      <ul id="login-dp" class="dropdown-menu"> 
       <li> 
        <div class="row"> 
          <div class="col-md-12"> 
           Login via 
           <div class="social-buttons"> 
            <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> 
            <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a> 
           </div> 
           or 
           <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> 
             <div class="form-group"> 
              <label class="sr-only" for="exampleInputEmail2">Email address</label> 
              <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
             </div> 
             <div class="form-group"> 
              <label class="sr-only" for="exampleInputPassword2">Password</label> 
              <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
              <div class="help-block text-right"><a href="">Forget the password ?</a></div> 
             </div> 
             <div class="form-group"> 
              <button type="submit" class="btn btn-primary btn-block">Sign in</button> 
             </div> 
             <div class="checkbox"> 
              <label> 
              <input type="checkbox"> keep me logged-in 
              </label> 
             </div> 
           </form> 
          </div> 
          <div class="bottom text-center"> 
           New here ? <a href="#"><b>Join Us</b></a> 
          </div> 
        </div> 
       </li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>   
    </div> 
     <div id="mint"></div> 
      <div class="" id="background1"> 
       <div class="container-fluid"> 
        <img class="img-responsive" id="logo1" src="images/logo1.png"/> 
       </div> 
       <div class="container-fluid"> 
        <p id="p1" class="" >A great new free psd theme to showcase your<br>new application.</p> 
       </div> 
       <div id="sicons"> 
        <img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" src="images/icon1.png"/> 
        <img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" style="margin-left: -15px; margin-right: -15px;" src="images/icon2.png"/> 
        <img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4" src="images/icon3.png"/> 
       </div> 
      </div> 

CSS:

 body { 
    margin: 0px; 
    padding: 0px; 
    font-family: sans-serif; 
    } 

    #black { 
    height: 48px; 
    background-color: #282828; 
    } 
    /*------------NAVBAR DALYKAI-------------------------*/ 

    #login-dp{ 
    min-width: 250px; 
    padding: 14px 14px 0; 
    overflow:hidden; 
    background-color:rgba(255,255,255,.8); 
    } 
    #login-dp .help-block{ 
    font-size:12px  
    } 
    #login-dp .bottom{ 
    background-color:rgba(255,255,255,.8); 
    border-top:1px solid #ddd; 
    clear:both; 
    padding:14px; 
    } 
    #login-dp .social-buttons{ 
    margin:12px 0  
    } 
    #login-dp .social-buttons a{ 
    width: 49%; 
    } 
    #login-dp .form-group { 
    margin-bottom: 10px; 
    } 
    .btn-fb{ 
    color: #fff; 
    background-color:#3b5998; 
    } 
    .btn-fb:hover{ 
    color: #fff; 
    background-color:#496ebc 
    } 
    .btn-tw{ 
    color: #fff; 
    background-color:#55acee; 
    } 
    .btn-tw:hover{ 
    color: #fff; 
    background-color:#59b5fa; 
    } 
    @media(max-width:768px){ 
    #login-dp{ 
     background-color: inherit; 
     color: #fff; 
    } 
    #login-dp .bottom{ 
     background-color: inherit; 
     border-top:0 none; 
    } 
    } 
    /*-------------------------------------------------------------------------------------------------------------------------*/ 



    #mint { 
    height: 10px; 
    background-color: #2ecc71; 
    } 

    #background1 
    { 
    height: 600px; 
    background-image: url("images/background1.jpg"); 
    background-repeat: no-repeat; 
    background-size:100%; 
    } 


    .p { 
    font-family: Myriad Pro; 
    } 

    #logo1 { 
    width: 10%; 
    margin-left: 20%; 
    margin-top: 11%; 
    } 

    #logo2 { 
    margin-top: 5%; 
    } 

    #p1 { 
    font-family: helvica-thin; 
    margin-left: 20%; 
    margin-top: 2%; 
    color: white; 
    font-size: 1.5vw; 
    } 

    #sicons { 
    position: absolute; 
    margin-left: 20%; 
    background-color: grey; 
    } 

    #sicons a:hover { 
    color: green; 
    } 

    #white { 
    height: 245px; 
    } 

    #icons { 
    position: absolute; 
    } 

    #iframe { 
    /*margin-top: 55px; 
    margin-left: 350px;*/ 
    border-radius: 10px; 
    overflow: hidden; 
    max-width: 560px; 
    max-height: 315px; 
    } 

    #button { 
    border-radius: 0px 10px 10px 0px; 
    height: 56px; 
    width: 141px; 
    background-color: #2ecc71; 
    border: 0; 
    box-shadow:none; 
    color: white; 
    font-size: 24px; 
    } 

    #p2 { 
    position: absolute; 
    text-align: center; 
    } 

    #grey { 
    height: 427px; 
    background-color: #e3e3e3; 
    } 

    #white1 { 
    height: 468px; 
    } 

    #grey1 { 
    min-height: 130px; 
    background-color: #e3e3e3; 
    } 

Answer 1

Глядя на ваш образец кода, оказывается виновник #sicons, имеющий значение position: absolute;. Позиции, расположенные абсолютно, всегда будут стоять поверх позиций позиции. Попробуйте назначить свои навигационные панели и #sicons с значениями z-index, что делает значение #sicons ниже, чем ваш навигатор.

Для получения дополнительной информации о том, как z-index работает, как она взаимодействует с позиционированных элементов, и порядок укладки, проверьте ответ на этот вопрос переполнения стека: "Understanding z-index stacking order"