Como fazer um DIV atrás de outro em HTML

No código HTML, os elementos DIV criam seções diferentes para o conteúdo nas páginas da web. Os desenvolvedores usam DIVs de várias maneiras. Às vezes, ocultar ou empilhar conteúdo até que uma determinada ação ocorra, como quando o usuário clica em um link. Você pode usar uma combinação de HTML e CSS (Cascading Style Sheets) para criar elementos DIV e depois colocá-los um atrás do outro, graças à propriedade CSS chamada “z-index”. Ao definir a propriedade “position” em cada DIV no seu código CSS, você pode adicionar o valor “z-index” para empilhar os DIVs um após o outro.

Escreva no código HTML um elemento DIV e coloque todo o conteúdo desejado entre as tags de abertura * e de fechamento *. Atribua ao DIV um atributo de ID para nomear o elemento. Você deve usar um nome exclusivo para esse elemento DIV e não usar o mesmo ID mais de uma vez na mesma página da web. Por exemplo: * * O conteúdo entra aqui …. *

Crie um segundo DIV abaixo do primeiro e adicione todo o conteúdo que você deseja para esse DIV. Coloque um atributo de ID com um nome diferente do primeiro. * * O conteúdo vai aqui …. * *

Abra seu arquivo CSS ou localize as tags entre as que você codificou no arquivo HTML. Você pode adicionar tags se elas não estiverem mais presentes. Use o código CSS para atribuir a cada DIV um tipo de posição “relativo”, conforme mostrado neste exemplo: #firstdiv {position: relative;} #seconddiv {position: relative;}

Adicione a propriedade “z-index” do código CSS para cada elemento DIV. Coloque o valor para “z-index” mais alto do que para o DIV empilhar em cima do outro. O DIV mais baixo da pilha obtém o valor mais baixo de “z-index”. # Firstdiv {position: relative; z-index: 2;} #seconddiv {posição: relativa; z-index: 1;} Você pode colocar o valor de “z-index” entre zero e 999. Você pode usar valores negativos, mas eles causam problemas em composições complexas e não funcionam em versões mais antigas do Internet Explorer.

Referências

 

Você pode estar interessado:

Deixe um comentário