Contexto de sobreposição

2.1 Propriedade z-index

Contexto de sobreposição em CSS é controlado pela propriedade z-index e define como os elementos são sobrepostos uns aos outros no eixo Z (a terceira coordenada, perpendicular à tela). Entender e usar corretamente z-index e o contexto de sobreposição permite criar layouts complexos e dinâmicos com elementos sobrepostos.

Noções básicas de contexto de sobreposição

O contexto de sobreposição define como os elementos serão exibidos uns sobre os outros. Cada elemento em uma página web tem um nível de sobreposição que pode ser alterado usando a propriedade z-index.

Regras de sobreposição

1. Posição na árvore do documento: elementos que estão mais abaixo na árvore do documento são sobrepostos sobre os elementos que estão acima.
2. Propriedade z-index: elementos com um valor maior de z-index são sobrepostos sobre aqueles com um valor menor de z-index.

Noções básicas de z-index

A propriedade z-index define a ordem de sobreposição dos elementos quando eles se sobrepõem. Elementos com maior valor de z-index são exibidos sobre aqueles com menor valor. O z-index é aplicado apenas a elementos com posicionamento (position: relative, absolute, fixed ou sticky).

Sintaxe:

    
      .element {
        position: relative; /* ou absolute, fixed, sticky */
        z-index: number;
      }
    
  

Onde:

• number: um número inteiro que pode ser positivo ou negativo. Quanto maior o valor, mais alto o elemento estará na ordem de sobreposição

Exemplo de uso de z-index:

Neste exemplo, a Box 2 com z-index: 2; será exibida sobre a Box 1 e Box 3, enquanto a Box 1 será exibida sobre a Box 3.

    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
    
  

    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>
    
  

2.2 Contexto de sobreposição (stacking context)

Contexto de sobreposição é um grupo de elementos que são considerados como uma única unidade ao definir a ordem de sobreposição. O contexto de sobreposição é criado quando certas condições são cumpridas, como a aplicação de z-index com posicionamento ou a presença de outras propriedades CSS.

Criação de contexto de sobreposição

O contexto de sobreposição é criado nos seguintes casos:

1. O elemento tem posicionamento relative, absolute, fixed ou sticky e valor de z-index diferente de auto.
2. O elemento tem propriedade opacity com valor menor que 1.
3. O elemento tem propriedade transform, filter, perspective, clip-path, mask ou mask-image diferente do valor padrão.
4. O elemento tem propriedade contain com valor layout, paint, ou strict.

Exemplo de criação de contexto de sobreposição:

    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="parent">
        Elemento Pai
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Explicação do código:

• .parent: elemento com position: relative; e z-index: 10;, que cria um novo contexto de sobreposição
• .child-blue: elemento com position: absolute; e z-index: 1;, que está no novo contexto de sobreposição criado pelo elemento pai
• .child-red: elemento com position: absolute; e z-index: 2;, que também está no novo contexto de sobreposição criado pelo elemento pai, e será exibido sobre o .child-blue

2.3 Interação entre contextos de sobreposição

Elementos dentro de um contexto de sobreposição não podem ser sobrepostos por elementos de outro contexto de sobreposição, a menos que a ordem dos próprios contextos seja alterada. Isso significa que elementos com maior z-index dentro de um contexto de sobreposição sempre serão exibidos acima dos elementos com menor z-index no mesmo contexto.

Exemplo de interação entre contextos de sobreposição:

    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
    
  

    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>
    
  

Neste exemplo, o container .container2 com z-index: 20; será exibido sobre o container .container1 com z-index: 10;. Os elementos dentro de cada container serão distribuídos de acordo com seu z-index, mas não se sobreporão com elementos de outro container.

2.4 Valores negativos de z-index

z-index pode assumir valores negativos, permitindo que os elementos fiquem abaixo de outros com valor de z-index zero ou positivo.

    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>
    
  

Explicação do código:

• .box1: Elemento com z-index: -1;, que será posicionado abaixo do elemento com z-index: 0;

Dicas para usar o z-index:

• Minimize o uso de z-index: tente usar z-index somente quando for realmente necessário. Isso ajuda a evitar estruturas de sobreposição complexas e confusas
• Crie contextos de sobreposição conscientemente: criar novos contextos de sobreposição ajuda a gerenciar a sobreposição de elementos, mas pode complicar a estrutura do documento
• Use valores de z-index semanticamente significativos: atribua valores de z-index com significado, por exemplo, use valores positivos para os elementos superiores e negativos para os inferiores