Estou tentando fazer uma div abrir logo abaixo de onde for cliclado, e que sobreponha qualquer texto ou imagem.

Fiz uma pequena imagem de exemplo.

Ao clicar na div 1 abrir a div 2 logo abaixo sobrepondo qualquer coisa que exista, como se fosse um menu dropdown.

Alguém sabe como faz?

Olá 33carlo,

Dá uma olhada nas nessas propriedades do CSS.

absolute e z-index

Segue um link para ajudar.

http://pt-br.html.net/tutorials/css/lesson15.php

CAro Carlo, a melhor forma de fazer isso, é usando o Javascript. No caso, sugeriria o Jquery por ser mais simples.

O Jquery tem varias funções que permitem fazer isso, segue umas:

http://api.jquery.com/toggle/

http://api.jquery.com/show/

http://api.jquery.com/slideDown/

http://api.jquery.com/slideToggle/

Abraços!

Eu tenho uma boa noção de CSS e JavaScript com JQuery, mas não consigo fazer esse posicionamento. O abrir e fechar das divs não é problema, o que está me matando é o posicionamento mesmo da segunda div.

Eu tenho uma boa noção de CSS e JavaScript com JQuery, mas não consigo fazer esse posicionamento. O abrir e fechar das divs não é problema, o que está me matando é o posicionamento mesmo da segunda div.

Mas se ela vai estar fixa em relaçao a primeira, use a funçao toggle() do jquery.

Tu diz colocar a div 2 como fixed?

Edit:

Assim NÃO funcionou:

$('#abrir').click(function(){

$('#div2').toggle();

})

<div id="abrir" style="padding: 10px;">Abrir</div>

<div id="div2" style="padding: 10px; display: none; position: fixed; background-color: #999;">Conteudo div 2</div>

<div>Meu texto...</div>

Edit 2:

Trocando o fixed por absolute, funciona.

Editado Fevereiro 4, 2011 em 15:02 Fev 4, 2011 por carlo

Fixa que digo é em relaçao ao posicionamento na tela e nao do css. Ou seja, independente de onde a div1 estiver, a div2 vai abrir sempre abaixo dela. Percebestes?

Em relaçao ao posicionamento, nesse caso usa-se o absolute. Não esqueça de que quando abrir o site:

Resolveu aí o problema?

Fixa que digo é em relaçao ao posicionamento na tela e nao do css. Ou seja, independente de onde a div1 estiver, a div2 vai abrir sempre abaixo dela. Percebestes?

Em relaçao ao posicionamento, nesse caso usa-se o absolute. Não esqueça de que quando abrir o site:

Resolveu aí o problema?

Aparentemente sim, obrigado :P

Bom, parece que tu resolveu, mas é possível fazer isso sem javascript e jQuery, só com css usando o position absolute

Bom, parece que tu resolveu, mas é possível fazer isso sem javascript e jQuery, só com css usando o position absolute

Ui. explique aí pra gente. Sempre é bem vindo novas idéias.

Vc diz fazer isso como se fosse um menu em css?