Como podemos fazer um elemento ser mais alto que outro na disposição?

Existem várias formas de fazer um elemento ficar acima de outro na disposição:

• z-index: A forma mais comum. Aplica-se a elementos posicionados (que têm position diferente de static). Um elemento com um valor maior de z-index ficará acima de um com valor menor no mesmo contexto de empilhamento.

  /* Elemento-1 ficará abaixo do Elemento-2 */
  .element-1 {
    position: relative;
    z-index: 1;
  }
  
  .element-2 {
    position: relative;
    z-index: 2;
  }
  

• Ordem no DOM: Na ausência de posicionamento explícito e z-index, o elemento que aparece mais tarde no código HTML estará visualmente acima dos anteriores.

  <!-- Elemento-2 ficará acima do Elemento-1 -->
  <div class="element-1"></div>
  <div class="element-2"></div>
  

• Propriedades de posicionamento: O uso de propriedades como position: absolute ou position: fixed cria automaticamente um novo contexto de empilhamento para o elemento e o posiciona acima do fluxo normal do documento (a menos que seja indicado o contrário).

  .element-absolute {
    position: absolute;
    /* Outras propriedades de posicionamento */
  }
  

• Flexbox/Grid (Order): Em layouts Flexbox e Grid, a propriedade order permite alterar a ordem visual dos elementos dentro do contêiner, embora não afete diretamente o contexto de empilhamento na compreensão padrão de z-index.

  .container {
    display: flex;
  }
  
  /* Elemento-2 será visualmente o primeiro */
  .element-1 {
    order: 2;
  }
  
  .element-2 {
    order: 1;
  }
  

• Transformações (Transform): O uso da propriedade transform cria um novo contexto de empilhamento local, e o elemento transformado pode aparecer acima de outros, mesmo sem posicionamento explícito e z-index.

  .element-transformed {
    transform: translateZ(1px); /* ou qualquer outra transformação */
  }
  

A escolha do método depende do contexto e do efeito desejado. Na maioria dos casos, para controle de sobreposição, usa-se z-index em combinação com position.