Como criar divs sobrepostos com CSS

No CSS, você pode criar divs sobrepostos utilizando o “posição" e "Z-Index”Propriedades. A propriedade de posição CSS define a posição do DIV ou contêiner, enquanto a propriedade Z-Index pode ser utilizada para definir a sequência div. Nesse cenário, o div, com maior valor do índice z é colocado em frente ao segundo.

Como resultado da leitura deste artigo, você poderá criar divs sobrepostos com CSS. Para esse fim, primeiro, aprenderemos sobre o “posição" e "Z-Index”Propriedades.

Vamos começar!

Propriedade "Posição" CSS

No 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 sua direita, esquerda, superior, inferior e em combinação com as propriedades Z-Index.

Sintaxe

A sintaxe da propriedade de posição é:

Posição: Valor

No lugar de "valor”, Você pode definir diferentes posições de elementos, como absoluto, relativo, fixo e pegajoso.

Propriedade "Z-Index" CSS

O "Z-Index”A propriedade é usada para definir a ordem de pilha dos elementos. O elemento com o maior valor de Z-índice é colocado na frente dos outros.

Sintaxe

A sintaxe da propriedade Z-Index é a seguinte:

Z-Index: Auto | Número

Na sintaxe acima mencionada, “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 criar divs sobrepostos com CSS.

Exemplo 1: Segunda div em sobreposição com o primeiro

Na seção HTML, criaremos dois divs e atribuiremos nomes de classe diferentes como “Div1" e "div2”.

Html

Agora, vá para o CSS e siga as instruções dadas:

• Defina o valor da propriedade de posição como “absoluto”Para Place Div1 exatamente o 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;
Z-Index: 1;
Antecedentes: RGB (4, 3, 75);

Saída

A primeira div é colocada com sucesso. Agora, nos mudamos para o segundo div.

Para sobrepor o Div2, siga as instruções dadas:

• Defina o valor da propriedade de posição, largura e altura do div2 mesmo que o “Div1”.
• Defina o valor do Z-índice como “2”Para colocá -lo em frente ao primeiro div.
• Defina uma cor de fundo diferente para o div2 como “RGB (0, 204, 255)”.
• Defina a margem do div2 como “50px”Como o valor da margem e da margem-esquerda.
• Defina a opacidade do div2 como “0.7”.

CSS

.div2
Posição: Absoluto;
Largura: 300px;
Altura: 250px;
Z-Index: 3;
Antecedentes: RGB (0, 204, 255);
margem: 50px;
Opacidade: 0.7;

Saída

Div2 se sobrepõe com sucesso ao Div1.

Se você deseja definir o div1 no topo da div, você só precisa alterar o valor do Z-Index. Vamos ver um exemplo disso.

Exemplo 2: Sobreposição de primeiro div com o segundo

Neste exemplo, mudaremos o valor do índice z de ambos os divs. No ".Div1”Classe do arquivo CSS, defina o valor de“Z-Index"Propriedade como"2”:

Z-Index: 2;

Depois disso, no “.div2”Classe, defina o valor do“Z-Index"Propriedade como"1”:

Z-Index: 1;

Como resultado, a primeira div ser colocada em frente à segunda div:

Nós compilamos o método mais fácil de criar dois divs sobrepostos com CSS.

Conclusão

O "posição" e "Z-Index”A propriedade é usada para criar divs sobrepostos no CSS. Por padrão, o valor do Index Z é 1, que afirma que o recém-criado DIV será colocado em frente à div. No entanto, você pode especificar qualquer valor de acordo com seus requisitos para ajustar a sequência sobreposta. Neste artigo, oferecemos os métodos para criar divs sobrepostos com CSS.