2

Preciso que a div 01 não interfira no posicionamento das outras divs, como a div 03 por exemplo, ou seja que a div 03 venha logo depois da div 02, que as divs siga o fluxo normal da pagina sem precisar da div 01, que a div 01 seja uma div de fundo que não interfira na posição das outras, que fique tipo assim: (Fiz uma gambiarra pra mostrar isso e se fosse usar a pagina ficaria toda destruturada)

foto 01

É como se a div 01 nem existisse para as outras divs, como se fosse uma imagem de fundo colocado no atributo 'body'!

foto 02

Como faço isso?

--------------- Resolvido ----------------

Resolvi assim:

A div 02 estava dentro da div 01, coloquei a div 02 pra fora e deixei a div 01 separada da div 02:

Antes:

<header>
    <div id="topo">
    </div>
</header>

Depois:

<div id="fundo">
</div>
<header>
</header>

Acrescentei esses atributos na div#fundo:

position:absolute;
z-index:-1;

Modelo de como ficou:

modelo

E deu certo, obrigado a todos!

3 Respostas 3

5

O ideal seria dar uma resposta me baseando no seu código, porém como você não postou (fica a dica para correção), vou te indicar algumas soluções.

Você pode ter vários tipos de positionno CSS.

Static

Segue o fluxo normal da <div>, ou seja, trabalha com blocos.

Relative

Aceita propriedades top, bottom, left e right para posicionamento.

Absolute

Trabalha com planos de <div> e sobreposições. Ou seja, não ignora a física! Mantem a lei que dois corpos não podem ocupar mesmo espaço e por isso, um sobrepõe o outro.

Fixed

Basicamente a mesma coisa que o absolute, mas o elemento fica fixo o tempo todo na tela. Um exemplo são aqueles popups chatos que sobrepões todos os elementos e fica fixo apesar de você usar o scroll.

Agora outro tópico!

Para trabalhar com a proprieda na sobreposição, usamos a propriedade z-indez que vai de 0 a X e define qual elemento ficará por cima. Exemplo:

HTML

<div id='primeiraDiv'> ... </div>
<div id='segundaDiv'> ... </div>
<div id='terceiraDiv'> ... </div>

CSS

#primeiraDiv{
z-index: 0;
}

#segundaDiv{
z-index: 1;
}

#terceiraDiv{
z-index: 2;
}
3

Resolvi assim:

A div 02 estava dentro da div 01, coloquei a div 02 pra fora e deixei a div 01 separada da div 02:

Antes:

<header>
    <div id="topo">
    </div>
</header>

Depois:

<div id="fundo">
</div>
<header>
</header>

Acrescentei esses atributos na div#fundo:

position:absolute;
z-index:-1;

E deu certo, obrigado a todos!

2

Já tentou mexer no z-index das divs? No css

#div1{
  z-index:20;
}
#div2{
  z-index:30;
}

Isso posiciona uma por cima da outra. O número maior posiciona a div por cima

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .