[Resolvido] Posicionamento de div´s

[Priole 0]

Boa tarde!!!

 

Gostaria de pedir ajuda aos mais experientes...

 

Estou desenvolvendo um layout com muitas div´s e, o menu que fica atrás retangulo com sombra.

 

Fiz div´s com a position relative, porém li alguns tutoriais que é possível utilizar o Z-index para sobrepor div´s desde que a position seja absolute.

 

Só que ao utilizar a position absolute, as divs de baixo sobem e vira uma salada.

 

Alguém poderia me dar uma luz?

 

Desde já agradeço,

[alcaidedigital 57]

Voce pode pegar o tamanho da div e jogar dentro da outra. Cod abaixo eu utilizo jQuery..

 

var heightMenu = $("#menu").height();
$("#sombra").height(heightMenu);

[wagner_1610 0]

Priole boa tarde

 

nao entendi muito bem, mas nao coloque todas as divs como relative , coloque apenas relative a div que engloba o menu, e coloque o menu com absolute, ai você manipulará só a div menu, as outras continuarao no mesmo lugar, pq nao terao vinculo direto com a div q engloba o menu.

 

espero q ajude.

[Priole 0]

Voce pode pegar o tamanho da div e jogar dentro da outra. Cod abaixo eu utilizo jQuery..

 

var heightMenu = $("#menu").height();
$("#sombra").height(heightMenu);

 

 

O problema é que altura não é fixa, muda conforme a página, tem páginas que o retângulo da sombra vai aumentar para baixo, enquanto o menu continua o mesmo.

[alcaidedigital 57]

É so mudar a referencia...

Então a sombra não vai corresponder ao menu, vai ser a pagina?

var tam = $(window).height();
$("#sombra").height(tam);

[angelorubin 142]

Boa tarde,

 

Montei uma estrutura basica aqui para você analisar e entender o uso de z-index e positon e aplicar na solução do seu problema.

 

CSS

<style type="text/css">
* {
margin:0;
padding:0;
 }

#box_mestre {
width:70%;
height:400px;
min-height:400px;
overflow:hidden;
background-color:#FF0;
z-index:0;
position:relative;
margin:5px auto;
 }

#box_01 {
margin:3px;
width:99%;
height:auto;
min-height:100px;
background-color:#F00;
position:absolute;
z-index:1;
top:5px;
 }

#box_02 {
margin:3px;
   width:66%;
height:auto;
min-height:100px;
background-color:#00F;
position:absolute;
z-index:2;
top:15px;
 }

#box_03 {
margin:3px;
   width:33%;
height:auto;
min-height:100px;
background-color:#999;
position:absolute;
z-index:3;
top:25px;
 }
</style>

 

XHTML

<div id="box_mestre">
 <div id="box_01"></div>  
 <div id="box_02"></div>
 <div id="box_03"></div>
</div>

 

Qualquer duvida é só postar.

 

Espero que ajude.

[Priole 0]

Ajudou sim, muito obrigada!!