Content passes above the header when scrolling page;

Navigation
2

I have a header and I have a section , so here's the problem, when scrolling the page, , goes over the content of the header , and I intended it to go below header , dropping the content that is passing. 

* {
  padding: 0;
  margin: 0;
}
header {
  width: 100%;
  background-color: #009688;
  height: 65px;
  color: white;
  position: fixed;
  top: 0
}
.container-logo {
  height: 60px;
  width: 35%;
  float: left;
  text-align: center;
  margin-top: 2.5px;
}
.container-logo span {
  display: none;
}
.container-menu {
  height: 60px;
  width: 64%;
  float: right;
  margin-top: 1px;
}
.container-menu nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.3em;
  margin-top: 15px;
  float: right;
  margin-right: 5%;
}
.container-menu nav ul li {
  display: inline;
}
.container-menu nav ul li a {
  padding: 5px 20px;
  display: inline-block;
  position: relative;
  color: #EDEDED;
  text-decoration: none;
  font-size: 1.2em;
}
.container-menu > nav ul li a {
  position: relative;
  color: #EDEDED;
  text-decoration: none;
}
.container-menu > nav ul li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #EDEDED;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.container-menu > nav ul li a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.menu-icon {
  margin-bottom: 7px;
  margin-right: 8px;
}
.main {
  width: 100%;
  /*1366 px */
  height: 580px;
  position: relative;
  top: 65.5px;
  text-align: center;
  border-bottom: 1px solid;
}
.apresentation {
  text-align: center;
  width: 100%;
  /* 1366 px */
  position: relative;
}
.apresentation h1 {
  padding-top: 100px;
  font-size: 3.5em;
  color: #009688;
  text-shadow: #EDEDED 1px -1px 2px, #EDEDED -1px 1px 2px, #EDEDED 1px 1px 2px, #EDEDED -1px -1px 2px;
}
.contact {
  width: 100%;
  height: 580px;
  border-bottom: 1px solid;
}
<header>
  <div class="container-logo">
    <h1>Logo</h1>
    <span><a href="#"><img src="img/menu.svg" alt="Menu"></a></span>
  </div>
  <div class="container-menu">
    <nav>
      <ul>
        <li>
          <a href="#">
            <img class="menu-icon" src="img/home.svg">Início</a>
        </li>
        <li>
          <a href="#">
            <img class="menu-icon" src="img/about.svg">Sobre</a>
        </li>
        <li>
          <a href="#">
            <img class="menu-icon" src="img/code.svg">Trabalhos</a>
        </li>
        <li>
          <a href="#">
            <img class="menu-icon" src="img/mail.svg">Contato</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<section class="main">
  <div class="apresentation">
    <h1>Olá! Seja bem vindo ao meu espaço.</h1>
    <h2>Sou estudante de sistemas de informação!!</h2>

  </div>
</section>

<section class="contact">
  <form>
    <fieldset>

    </fieldset>
  </form>
</section>

Please note that by scrolling the page the content passes above the header .

    
asked by anonymous 09.07.2015 / 20:32

1 answer

2

You have to add z-index to the header so this problem does not happen. For example: 

header {
    width: 100%;
    background-color: #009688;
    height: 65px;
    color: white;
    position: fixed;
    top: 0;
    z-index: 9; /* Adiciona esta propriedade */
}

Example in jsFiddle: link

About z-index

The z-index property determines the " stacking level " of an HTML element. The "stacking level" - Refers to the position of the element, in the Z axis (as opposed to the X axis or Y axis). A positive% value of% greater than > z-index , means that the element will be closer to the top, in the stacking order. This stacking order occurs perpendicular to the screen (or viewport).

    
09.07.2015 / 20:43
Make an update of several fields and values in the same table Edit an element within an object, within an array, with Mongoose