Bilder überlappen kollabiert navbar

Question

Ich konnte so etwas im Internet nicht finden, also frage ich euch! Das Problem ist, dass sich meine Symbole mit meiner minimierten Navigationsleiste überschneiden.

Mein Code:

<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

Von Ihnen Codebeispiel sucht, scheint es der Täter #sicons ist mit einem Wert von position: absolute;. Gegenstände, die absolut positioniert sind, sitzen immer auf relativ positionierten Gegenständen. Versuchen Sie, Ihre Navbar und #sicons Container mit z-index Werten zu belegen, wodurch #sicons niedriger als Ihre Navbar ist.

Weitere Informationen darüber, wie z-index funktioniert, wie es mit positionierten Elementen in Wechselwirkung tritt, und die Stapelreihenfolge, die Antwort Besuche auf dieser Stack-Überlauf Frage: "Understanding z-index stacking order"