Quantcast
Channel: Tópicos
Viewing all articles
Browse latest Browse all 14700

z-index?

$
0
0
Bom Dia Pessoal!

Tenho as div's abaixo:
Código (HTML):
  <div id="cabecalho">
    <div id="formBox">
      <div id="formTopo"><img src="img/cota.png" width="250" height="143" /></div>
      <div id="form"><?php include("form.php"); ?></div>
    </div>
    <div id="banner"><?php include("banner.php");?></div>    
    <div id="sombra"><img src="img/sombra.png" /></div>
  </div>  
E estou com dois problemas para resolver:

1) Preciso colocar uma div sobre a outra
    a) div sombra e cima da div formBox; div formBox em cima da div banner; div formTopo em cima da div form; Como formTopo e form estão dentro da div formBox, creio que quando fizermos div formBox em cima da divBanner, ficarão no seu devido lugar.

Estou fazendo assim (com z-index) mas não esta funcionando.
Código (CSS):
#cabecalho
{
  position:absolute;
  width:1000px;
  left:50%;
  margin-left:-500px;  top:120px;
  height:463;
}
  #formBox
  {
     text-align:center;
     float:left;
     width:250px;
     height:463px;
     z-index: 1;
  }
      #formTopo
      {
         -webkit-border-radius: 10px 10px 10px 10px;
          -moz-border-radius:  10px 10px 10px 10px;
          border-radius:  10px 10px 10px 10px;
          border: 0px solid #95A9B3;
          top:0;
          z-index: 1;
      }
      #form
     {
         width:240px;
         background-color:#424242;
         height:320px;
         -webkit-border-radius: 0px 0px 10px 10px;
          -moz-border-radius:  0px 0px 10px 10px;
          border-radius:  0px 0px 10px 10px;
          border: 0px solid #95A9B3;
          z-index: 2;
     }
  #banner
  {
      position:absolute;
      float:right;
      width:750px;
      margin-left:235px;
      height:463px;
      z-index: 2;
  }

  #sombra
  {
      float:right;
      top:400px;
      width:1000px;
      z-index: 3;
  }  

Viewing all articles
Browse latest Browse all 14700

Latest Images

Trending Articles