Menu position fixed

28/04/2020
Eu tenho um menu fixo com position fixed, mas os conte�dos abaixo, quando rolo o scroll passa por cima do menu, como corrigir:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="home.css"/>
    <title>Document</title>
    <style>

* {
    Padding: 0px;
    Margin: 0px;
}
body{
    margin:  0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
h1, p, a{
    color: #494949;
    font-family: sans-serif ;
    font-size: 24px;
}

nav.menubar{
    width: 100%;
    background: #137277;
    position: fixed; 
    top: 0;
    overflow: hidden;

}
ul{
   width: 80%;    /* A linha esta ocupando 80% de largura em rela��o a nav */
   margin: 0 auto;
   padding: 0;
}
ul li{
   list-style: none;
   display: inline-block;
   padding: 20px;
}

ul li:hover{
   background: #e91e63;
}
ul li a {
   color: #fff;
   font-size: 18px;
   text-decoration: none;
}
.botao:hover {
   background-color: rgba(52, 152, 219, 1.0);
  /* background: #137277; */
   box-shadow: 0px 0px 10px gray;
}
.toggle{
   width: 100%;
   padding:  10px 20px;
   text-align: right;
   box-sizing: border-box;
   color: #fff;
   font-size: 30px;
   display: none;
}
.container{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    /* background: red; */
}
.container .slider{
    position: absolute;
    top: 6%; 
    left: 0;
    background: blue;
    width: 500%;
    height: 100%;
    animation:  animate 10s linear infinite;
 }
.container .slider .slide 
{
    position: relative;
    width: 20%;
    height: 100%;
    float: left;
    background: rgb(243, 9, 9);
}
.container .slider .slide .caption
{
    position: absolute;
    bottom: 60px;
    left: 60px;
    right: 60px;
    padding: 30px;
    box-sizing: border-box;
    background: rgb(243, 9, 9);
}
.container .slider .slide .caption h2{
    margin: 0 0 20px;
    padding: 0;
    font-size: 48px;
    color:#fff;
}
.container .slider .slide .caption p{
    
    bottom: 60px;
    left: 60px;
    right: 60px;
   
    margin: 0;
    padding: 0px;
    font-size: 18px;
    color:#fff;
    box-sizing: border-box;
}
.container .slider .slide.slider1{
 background: grey;
 background-size: cover;
 background-position: center;
}
.container .slider .slide.slider2{
    background: magenta;
    background-size: cover;
    background-position: center;
   }
      .container .slider .slide.slider3{
    background:mediumslateblue;
    background-size: cover;
    background-position: center;
   }
   .container .slider .slide.slider4{
    background: orange;
    background-size: cover;
    background-position: center;
   }
   .container .slider .slide.slider5{
    background: palegreen;
    background-size: cover;
    background-position: center;
   }
   @keyframes animate
   {
       0% {  left: 0;  }
       20%{ left: 0;  }

       25% { left: -100%; }

       45% { left: -100%;  }

       50% { left: -200%; }

       70% { left: -200%; }

       75% { left: -300%; }

       75% { left: -300%; }

       95%  {left: -300%; }

       100%   {left: -400%;}
   }
article.conteudo
{
    position: relative;
    padding: 30px;
    top: 860px;
   
}
@media (max-width:768px)
{
    .toggle{
        display: block;
    }

    ul 
    {
        width: 100%; /* agora ira ocupar 100% da largura da nav*/
        display: none;
    }
    ul li 
    {
        display: block;
        text-align: center;
    }
    .active
    {
        display: block;
    }
 }
     </style>
</head>
<body>
  <div class="container">
    <nav class="menubar"> <!--  #headerAlguns chamam de header-->
      <div class="toggle">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
      </div>
        <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#sobre">Sobre</a></li>
        <li><a href="#servico">Servi�o</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#contato">Contato</a></li>
      </ul>
   </nav>
    <div class="slider">
            <div class="slide slider1">
          <div class="caption">
            <h2>Slider 1</h2>
            <p>
              Texto 1
            </p>
          </div>
      </div> <!--slide-->
        <div class="slide slider2">
        <div class="caption">
          <h2>Slider 2</h2>
          <p>
            Texto 2
          </p>
        </div>
      </div> <!--slide-->
        <div class="slide slider3">
          <div class="caption">
            <h2>Slider 3</h2>
            <p>
              Texto 3
            </p>
          </div>
      </div> <!--slide-->
        <div class="slide slider4">
          <div class="caption">
            <h2>Slider 4</h2>
            <p>
              Texto 4
            </p>
          </div>
      </div><!--slide-->
  
      <div class="slide slider5">
        <div class="caption">
          <h2>Slider 5</h2>
          <p>
            Texto 5
          </p>
        </div>
      </div><!--slide-->
  
    </div> <!--slider-->
  </div> <!--container-->
     <section class="artigos">

      <article class="conteudo">
      <h1>The standard Lorem Ipsum passage, used since the 1500s</h1>
  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article>    
  
    <article class="conteudo">  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article> 
  
    <article class="conteudo"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article>
  
    <article class="conteudo"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </article>

  </section>
 </body>
</html>
Abmael Ferreira
Curtir t�pico + 0
Responder
Post mais votado
28/04/2020
Boa noite, tudo bem?

Ao meu ver, o que est� ocorrendo � que o conte�do dos slides, est�o passando por cima do seu menu. Tente utilizar a propriedade z-index para fazer com que o menu sempre fique em cima dos elementos.

https://www.devmedia.com.br/css-z-index-entendendo-sobre-o-eixo-z-na-web/28698
Giuliano
Responder
Gostei + 1
Mais Posts
29/04/2020
Abmael Ferreira
Bom dia tudo bem, valeu Giuliano, foi na mosca, muit�ssimo obrigado, vou continuar meus estudos.
Responder
Gostei + 0