Bits of .NET

📚 Z-Index = Stack Order

Elements overlap. Z-index controls stacking order. Modals, tooltips, dropdowns — proper layering.

📝 Z-Index Basics

/* Basic usage */
.modal {
    z-index: 1000;
    position: fixed;
}

.tooltip {
    z-index: 100;
    position: absolute;
}

.dropdown {
    z-index: 50;
    position: relative;
}

/* Stacking context */
.parent {
    position: relative;
    z-index: 1;
}
.child {
    position: relative;
    z-index: 10;
}
/* Child is above parent even with z-index:10 */

/* Auto z-index */
.element {
    z-index: auto; /* Default */
}

/* Common z-index values */
.background  → -1
.content     → 0-10
.dropdown    → 1000
.sticky      → 2000
.header      → 3000
.overlay     → 4000
.modal       → 5000
.popup       → 6000
.tooltip     → 7000
.toast       → 8000
.loading     → 9000
.maximum     → 9999

🎯 Z-Index Examples

/* Modal overlay */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    z-index: 1000;
}

/* Tooltip */
.tooltip-trigger {
    position: relative;
}
.tooltip-trigger:hover .tooltip {
    display: block;
}
.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 1000;
}

/* Sticky header */
.header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 50;
}

/* Loading spinner */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
}

💡 Z-Index Tips

• Only works on positioned elements
• Higher number = above
• Create new stacking contexts
• Use consistent value ranges
• Avoid z-index: 999999