Propiedad en CSS que determina la posición relativa de elementos superpuestos.
Un valor mayor indica que el elemento está más arriba en la pila de capas.
/* Z-index en CSS */ /* Solo funciona con position != static */ .modal { position: fixed; z-index: 1000; /* Muy alto para estar encima de todo */ } .dropdown { position: absolute; z-index: 100; } .tooltip { position: absolute; z-index: 50; } /* Sistema de z-index organizado */ :root { --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; } .modal { z-index: var(--z-modal); } /* Contexto de apilamiento */ /* Un elemento con z-index crea un nuevo contexto */ .padre { position: relative; z-index: 1; /* Crea contexto */ } .hijo { position: absolute; z-index: 9999; /* Solo afecta dentro del contexto del padre */ } /* Tailwind CSS */ <div class="z-10">...</div> <div class="z-50">...</div>
