CSS z-index não funciona na tabela

Bruna Siqueira · 11 de fevereiro de 2019

Boa tarde,

estou montando um formulario simples, mas quero que ele fiquei um pouco em cima do topo (conforme imagem)

porém coloco o z-index e só o input vai...

ja me disseram para colocar position: absolute, mas ai perco todas as outras formatações da tabela, não consigo achar o erro

segue o codigo:

<html>
<head>
    <style>
.contatei {
   margin-right:auto; 
   margin-left:auto;
    margin-top: -5%;
    z-index: 50; /*--------------------z index -------*/
box-shadow: 1px 1px 10px gray;
    width: 30%;   
    height:auto;
    padding: 10px 10px 10px 10px;
    }
.contatei table,td,tr {
    border: 0;
    border: none;
    background-color: #ffffff;
        z-index: 50; /*--------------------z index -------*/
    }    
 .contatei input {
    margin: 10px 10px 10px 0px;
     width: 100%;
    }   
  .contatei textarea {
        height: 6em;
          margin: 10px 10px 10px 0px;
      width: 100%;
    }  
        .contatei button {
            width: 100%;
            border: 0;
                margin: 10px 10px 10px 0px;
        }    
        .topo {
            margin: 0;
            width: 100%;
            z-index: 0; /*--------------------z index -------*/
        }
       
    </style>
</head>
<body>
    <img src="topo.png" class="topo">
<table  class="contatei">
    <tr>
    <td>
        <label for="nome">Nome*</label><br>
        <input type="text" id="nome" />
        </td>
    </tr>
    <tr>
<td>
        <label for="email">E-mail*</label><br>
        <input type="email" id="email" />
        </td>
    </tr>
        <tr>
    <td>
        <label for="assunto">Assunto*</label><br>
        <input type="assunto" id="assunto" />
        </td>
    </tr>
    <tr>
    <td>
        <label for="msg">Mensagem*</label><br>
        <textarea id="msg"></textarea>
        </td>
    </tr>
    <tr>
    <td>
        <button>Enviar</button>
        </td>
    </tr>
    </table>

</body>
<html>

DiF · 11 de fevereiro de 2019

@Bruna Siqueira Olá, precisa necessariamente fazer com tabelas?

Ademais, não vejo a imagem.

O atributo Z-index funciona só com elementos que forem irmãos adjascentes e/ou filhos de um elemento pai.

No caso, creio que se não quiser remover o layout de tabelas, você precisa colocar a tabela em um elemento DIV e aplicar a posição absoluta neste div e não na tabela!

Adriano_web · 11 de fevereiro de 2019

Ola @Bruna Siqueira como informou @DiF basta colocar a tabela enrolada dentro de um elemento div para que ele obtenha o z-index. Segue o exemplo.

<head>
  <title>Exemplo</title>
  <style>
    .tb-container {  /* Novo recipiente para abrigar a tabela */
      background: #FFF;
      position: relative;  
      margin: -5% auto 0 auto;
      width: 30%;
      z-index: 50; /* destacar ela da imagem */
    } 

    .contatei {
      box-shadow: 1px 1px 10px gray;
      height: auto;
      padding: 10px;
      width: 100%;
    }

    .contatei table, tr, td {
      background: #FFF;
      border: none;
    }

    .contatei input {
      margin: 10px;
      margin-right: 0;
      width: 100%;
    }

    .contatei textarea {
      height: 6em;
      margin: 10px;
      margin-right: 0;
      width: 100%;
    }
   
    .contatei button {
      border: none;
      margin: 10px;
      margin-right: 0;
      width: 100%;
    }

    .topo {
      margin: 0;
      width: 100%;
    }
  </style>
</head>
<body>
  <img src="topo.png" class="topo">
  <div class="tb-container">
    <table  class="contatei">
      <tr>
        <td>
          <label for="nome">Nome*</label><br>
          <input type="text" id="nome" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="email">E-mail*</label><br>
          <input type="email" id="email" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="assunto">Assunto*</label><br>
          <input type="assunto" id="assunto" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="msg">Mensagem*</label><br>
          <textarea id="msg"></textarea>
        </td>
      </tr>
      <tr>
        <td>
          <button>Enviar</button>
        </td>
      </tr>
    </table>
  </div>
</body>