Content overwrites fixed menu when scrolling page

Asked

Viewed 814 times

2

I’ve tried to put z-index: 2 in the <header></header>, but it didn’t work

@charset "UTF-8";

body {
  display: flex;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  transition: linear 1s;
  box-sizing: border-box;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

header>nav * {
  display: flex;
  flex: 1;
  transition: all 0.5s ease;
}

header>nav ul {
  padding: 0;
  margin: 0;
}

header>nav ul li {
  position: relative;
  list-style: none;
  line-height: 50px;
}

header>nav>ul>li {
  flex-direction: column;
  text-align: center;
}

header>nav>ul>li[ng-click]:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

header>nav>ul>li>ul {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  flex-direction: column;
  width: 100%;
  height: 0;
  opacity: 0;
}

header>nav>ul>li:hover>ul {
  height: 150px;
  opacity: 1;
}

header>nav>ul>li>ul>li {
  background-color: rgba(255, 255, 255, 1);
  padding-left: 15px;
  display: none;
}

header>nav>ul>li:hover>ul>li {
  display: flex;
}

ng-include {
  margin-top: 50px;
}

h1 {
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
}

input {
  padding: 5px;
  width: 300px;
  margin: 15px 0;
}

input:not([type="submit"]) {
  border-width: 0 0 1px 0;
  border-bottom-color: black;
}

input[type="submit"],
button {
  background-color: transparent;
  border: none;
}

input:focus {
  outline: 0;
}

table {
  width: 100%;
  margin: 1em auto;
}

td,
th {
  overflow: hidden;
}

table tr th {
  color: #FFF;
  background-color: #222;
}

table {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}

table {
  box-shadow: 1px 1px 10px 1px #777;
}

table tr {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}

td,
th {
  flex: 1;
  width: 25%;
  padding: 1em;
}

@media all and (max-width: 43.125em) {
  th {
    display: none;
  }
  table tr td:before {
    content: attr(title);
    width: 75px;
    display: block;
    padding: .25em .5em;
    position: absolute;
    top: 0;
    left: 0;
  }
  table tr {
    flex-direction: column;
  }
  table tr td {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    padding: 3em 0 1em 1em;
  }
}
<body ng-controller="controllerDataPOA as controller" class="ng-scope">
  <header>
    <nav>
      <ul>
        <li>Home</li>
        <li>UFEF</li>
        <li>Usuários
          <ul>
            <li>Conectar</li>
            <li>Cadastrar</li>
            <li>Meu perfil</li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>
  <div>
    <h1>5 universidades, faculdades, escolas estaduais e federais cadastradas</h1>
    <table>
      <thead>
        <tr>
          <th>Nome</th>
          <th>Endereço</th>
          <th>Bairro</th>
          <th>Telefone</th>
          <th>Site/Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>COLÉGIO DE APLICAÇÃO DA UFRGS</td>
          <td>AV. BENTO GONÇALVES, 9500 </td>
          <td>AGRONOMIA</td>
          <td>3308-6977 </td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>ESCOLA TÉCNICA DA UFRGS</td>
          <td>RUA CORONEL VICENTE, 281 </td>
          <td>CENTRO</td>
          <td>3930-6010 </td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>COLÉGIO MILITAR DE PORTO ALEGRE</td>
          <td>AV. JOSÉ BONIFÁCIO, 363 </td>
          <td>FARROUPILHA</td>
          <td>3226-4209 </td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>CRECHE FRANCESCA ZACARO FARACO</td>
          <td>RUA SAO MANOEL, SN° </td>
          <td>RIO BRANCO</td>
          <td>3316-5273 </td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>INSTITUTO FEDERAL EDUCAÇÃO E TECNOLOGIA DO RS - CAMPUS RESTINGA</td>
          <td>ESTRADA JOÃO ANTÔNIO DA SILVEIRA, 351 </td>
          <td>RESTINGA</td>
          <td>3247-8400 </td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

html css menu positioning

1 answer

3


William’s content is already behind the header, the problem is that the header no background color, so it looks like one is on top of the other, but is not!

Look at the example, I just put a color on headere and already solved. I also needed to make a class in the div which encompasses the table pq in the responsive was still in trouble.

    body {
  display: flex;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  transition: linear 1s;
  box-sizing: border-box;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  background: red;
  z-index:1000;
}

header>nav * {
  display: flex;
  flex: 1;
  transition: all 0.5s ease;
}

header>nav ul {
  padding: 0;
  margin: 0;
}

header>nav ul li {
  position: relative;
  list-style: none;
  line-height: 50px;
}

header>nav>ul>li {
  flex-direction: column;
  text-align: center;
}

header>nav>ul>li[ng-click]:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

header>nav>ul>li>ul {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  flex-direction: column;
  width: 100%;
  height: 0;
  opacity: 0;
}

header>nav>ul>li:hover>ul {
  height: 150px;
  opacity: 1;
}

header>nav>ul>li>ul>li {
  background-color: rgba(255, 255, 255, 1);
  padding-left: 15px;
  display: none;
}

header>nav>ul>li:hover>ul>li {
  display: flex;
}

ng-include {
  margin-top: 50px;
}

h1 {
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
}

input {
  padding: 5px;
  width: 300px;
  margin: 15px 0;
}

input:not([type="submit"]) {
  border-width: 0 0 1px 0;
  border-bottom-color: black;
}

input[type="submit"],
button {
  background-color: transparent;
  border: none;
}

input:focus {
  outline: 0;
}

table {
  width: 100%;
  margin: 1em auto;
}

td,
th {
  overflow: hidden;
}

table tr th {
  color: #FFF;
  background-color: #222;
}

table {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}

table {
  box-shadow: 1px 1px 10px 1px #777;
}

table tr {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}

td,
th {
  flex: 1;
  width: 25%;
  padding: 1em;
}

@media all and (max-width: 43.125em) {
  th {
    display: none;
  }
  table tr td:before {
    content: attr(title);
    width: 75px;
    display: block;
    padding: .25em .5em;
    position: absolute;
    top: 0;
    left: 0;
    z-index:-1;
  }
  table tr {
    flex-direction: column;
  }
  table tr td {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    padding: 3em 0 1em 1em;
  }
  .respos {
      position: relative;
      z-index: -1;
  }
}
<body ng-controller="controllerDataPOA as controller" class="ng-scope">
        <header>
          <nav>
            <ul>
              <li>Home</li>
              <li>UFEF</li>
              <li>Usuários
                <ul>
                  <li>Conectar</li>
                  <li>Cadastrar</li>
                  <li>Meu perfil</li>
                </ul>
              </li>
            </ul>
          </nav>
        </header>
        <div class="respo">
          <h1>5 universidades, faculdades, escolas estaduais e federais cadastradas</h1>
          <table>
            <thead>
              <tr>
                <th>Nome</th>
                <th>Endereço</th>
                <th>Bairro</th>
                <th>Telefone</th>
                <th>Site/Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>COLÉGIO DE APLICAÇÃO DA UFRGS</td>
                <td>AV. BENTO GONÇALVES, 9500 </td>
                <td>AGRONOMIA</td>
                <td>3308-6977 </td>
                <td>[email protected]</td>
              </tr>
              <tr>
                <td>ESCOLA TÉCNICA DA UFRGS</td>
                <td>RUA CORONEL VICENTE, 281 </td>
                <td>CENTRO</td>
                <td>3930-6010 </td>
                <td>[email protected]</td>
              </tr>
              <tr>
                <td>COLÉGIO MILITAR DE PORTO ALEGRE</td>
                <td>AV. JOSÉ BONIFÁCIO, 363 </td>
                <td>FARROUPILHA</td>
                <td>3226-4209 </td>
                <td>[email protected]</td>
              </tr>
              <tr>
                <td>CRECHE FRANCESCA ZACARO FARACO</td>
                <td>RUA SAO MANOEL, SN° </td>
                <td>RIO BRANCO</td>
                <td>3316-5273 </td>
                <td>[email protected]</td>
              </tr>
              <tr>
                <td>INSTITUTO FEDERAL EDUCAÇÃO E TECNOLOGIA DO RS - CAMPUS RESTINGA</td>
                <td>ESTRADA JOÃO ANTÔNIO DA SILVEIRA, 351 </td>
                <td>RESTINGA</td>
                <td>3247-8400 </td>
                <td>[email protected]</td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>

  • My mistake, it seemed that the text of the menu was below, but anyway, thanks

  • @Guilhermecostamilam guy if I tell you that I was about 20 me looking at the screen without understanding why was on top you believe. When it hit me that it was the color I even laughed here :D

Browser other questions tagged html css menu positioning

You are not signed in. Login or sign up in order to post.