Inferior É Em Cima Ou Embaixo

Posicionamento em CSS: entendo tudo sobre a regra inferior

Vou te explicar algo que sempre gera confusão quando trabalhamos com boxes sobrepostos. Às vezes vejo desenvolvedores novatos achando que colocar algo em cima significa usar z-index alto, mas na verdade a posição do elemento no fluxo do documento e o tipo de posicionamento escolhido importam mais do que o valor numérico. Quando você diz que um elemento está abaixo de outro visualmente, isso pode ser verdade tanto em termos de hierarquia visual quanto de ordem DOM.

infernior é em cima ou embaixo

Acho que entendi o que você está perguntando. Se você tem dois elementos e quer saber se um fica acima do outro na tela, precisa verificar três coisas: a ordem no código HTML, os valores de z-index e o tipo de positioning aplicado. Eu tinha um problema real semana passada com um modal que precisava ficar sobre um carrossel de imagens, e o z-index sozinho não resolveu porque o carrossel estava dentro de um container com overflow:hidden que cortava tudo o que passava dos limites. O workaround foi simples: mover o modal para fora do container restritivo e aplicar position:fixed nele. Assim ele não obedecia mais às restrições de clipping do pai. Isso acontece frequentemente quando se usa bibliotecas de slider prontas sem entender como o stacking context funciona.

Outro ponto que poucos entendem é que position:relative com z-index maior que um sibling com position:absolute não necessariamente coloca o primeiro por cima. O que importa é qual elemento está mais no final do código e tem stacking context ativo. Eu já perdi duas horas debugando isso porque achava que a ordem de declaração no CSS controlava a renderização, quando na verdade é a ordem no DOM que prevalece quando os elementos estão no mesmo contexto. Se você quer que algo fique visualmente abaixo de outro mas na hierarquia visual ele esteja por trás, use position:relative no elemento inferior e defina z-index negativo. Isso funciona na maioria dos navegadores modernos, mas pode ter problemas de acessibilidade porque leitores de tela ignoram elementos com z-index negativo. Para menus dropdown, o ideal é garantir que o container pai tenha position:relative e o submenu tenha position:absolute com z-index positivo. Teste sempre em mobile também porque algumas implementações de scroll-snap criam stacking contexts implícitos que quebram o posicionamento pretendido.

Uma limitação importante é que elementos com position:fixed ou sticky sempre criam novo stacking context e podem não respeitar z-index do pai. Se você precisa sobrepor um header fixo sobre conteúdo scrollável, o header precisa ter z-index maior que qualquer elemento do conteúdo principal, senão vai aparecer por baixo durante o scroll. Isso custa cerca de 30 minutos a mais de debug para quem não conhece o comportamento do scrolling layer. Resumindo na prática: verifique primeiro a ordem no HTML, depois o tipo de positioning de cada elemento, e só então ajuste z-index. Se precisar empregar técnicas avançadas como container queries para reposicionar elementos em telas menores, o processo todo de layout responsivo com sobreposição leva em média 15 minutos para ajustar dependendo da complexidade do componente.