I have that problem, that on my header the box shadow isn't visible because my navigation content lays on top of it, event though my header has a higher z-index. I cant't see what exactly is the issue here, shouldn't this work? Here is an example of my issue:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sticky Element with Navigation</title><style> body { margin: 0; font-family: Arial, sans-serif; } .sticky-header { position: sticky; top: 0; z-index: 1000; /* Ensure this is high enough */ background: white; box-shadow: 0px 3px 6px rgba(0, 0, 0, .16); padding: 10px; } .absolute-nav-wrapper { position: absolute; top: 100%; left: 0; width: 100%; z-index: -1; /* Ensure this is lower than the sticky header */ } .navigation { background: white; padding: 10px; } .content { padding: 20px; }</style></head><body><div class="sticky-header"> Sticky Header<div class="absolute-nav-wrapper"><div class="navigation"> Navigation Content</div></div></div><div class="content"><p>Page content goes here...</p><p>More content...</p></div></body></html>If you remove this part:
<div class="absolute-nav-wrapper"><div class="navigation"> Navigation Content</div></div>the shadow shows up again.