Como resultado da leitura deste artigo, você poderá criar divs sobrepostos com CSS. Para isso, primeiro, aprenderemos sobre o “ posição ' e ' índice z ” propriedades.
Vamos começar!
Propriedade CSS “posição”
Em HTML, você pode definir a posição dos elementos utilizando o “ posição ' propriedade. A posição final de um elemento em uma página da web é determinada por suas propriedades direita, esquerda, superior, inferior e em combinação com as propriedades do z-index.
Sintaxe
A sintaxe da propriedade position é:
posição : valor
No lugar de ' valor ”, você pode definir diferentes posições de elementos, como absoluto, relativo, fixo e fixo.
Propriedade CSS “z-index”
O ' índice z ” é usada para definir a ordem da pilha de elementos. O elemento com o maior valor de z-index é colocado na frente dos outros.
Sintaxe
A sintaxe da propriedade z-index é a seguinte:
índice z : auto |númeroNa sintaxe dada acima, “ auto ” é usado para definir a ordem de acordo com o elemento pai, enquanto para a sequência manual, o “ número ” é definido como o valor da propriedade z-index.
Agora, vamos para o exemplo prático de criação de divs sobrepostos com CSS.
Exemplo 1: sobreposição da segunda div com a primeira
Na seção HTML, criaremos duas divs e atribuiremos nomes de classes diferentes como “ div1 ' e ' div2 ”.
HTML
< corpo >< div classe = 'div1' >< / div >
< div classe = 'div2' >< / div >
< / corpo >
Agora, vá para o CSS e siga as instruções fornecidas:
- Defina o valor da propriedade position como “ absoluto ” para colocar div1 exatamente no lugar onde você deseja.
- Ajuste a altura e a largura do div1 como “ 250px ' e ' 300px ”.
- O valor do índice z é definido como “ 1 ”.
- Defina a cor de fundo do div1 como “ rgb(4, 3, 75) ”.
CSS
.div1 {posição : absoluto ;
altura : 250px ;
largura : 300px ;
índice z : 1 ;
fundo : rgb ( 4 , 3 , 75 ) ;
}
Resultado
A primeira div foi colocada com sucesso. Agora, vamos para a segunda div.
Para sobrepor o div2, siga as instruções fornecidas:
- Defina o valor da propriedade position, largura e altura do div2 da mesma forma que o “ div1 ”.
- Defina o valor do índice z como “ dois ” para colocá-lo na frente da primeira div.
- Defina uma cor de fundo diferente para o div2 como “ rgb(0, 204, 255) ”.
- Defina a margem de div2 como “ 50px ” como o valor da margem superior e da margem esquerda.
- Defina a opacidade de div2 como “ 0,7 ”.
CSS
.div2 {posição : absoluto ;
largura : 300px ;
altura : 250px ;
índice z : 3 ;
fundo : rgb ( 0 , 204 , 255 ) ;
margem : 50px ;
opacidade : 0,7 ;
}
Resultado
Div2 se sobrepõe com sucesso a div1.
Se você quiser definir div1 em cima de div dois, basta alterar o valor do z-index. Vejamos um exemplo disso.
Exemplo 2: Sobreposição da primeira div com a segunda
Neste exemplo, vamos alterar o valor do z-index de ambas as divs. No ' .div1 ” do arquivo CSS, defina o valor de “ índice z ” propriedade como “ dois ”:
índice z : dois ;Depois disso, no “ .div2 ” classe, defina o valor do “ índice z ” propriedade como “ 1 ”:
índice z : 1 ;Como resultado, a primeira div será colocada na frente da segunda div:
Nós compilamos o método mais fácil para criar duas divs sobrepostas com CSS.
Conclusão
O ' posição ' e ' índice z ” é usada para criar divs sobrepostos em CSS. Por padrão, o valor do z-index é 1, o que indica que o div recém-criado será colocado na frente do div existente. No entanto, você pode especificar qualquer valor de acordo com seus requisitos para ajustar a sequência de sobreposição. Neste artigo, oferecemos os métodos para criar Divs sobrepostos com CSS.