Question posted in 
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.
2
Answers
As meet mentioned… your HTML structure is not the best. I’ve made you an example for an easy semantic HTML structure. You can put everything in a
divtoo and give it a class. But this makes the code a little bit cleaner.Let’s switch to your problem. Because of this poor layout and a few unnecessary properties, nothing works. There is no need for
z-index(as long as there are no other elements with az-index). Especially az-index: -1for an element which the user wants to interact with is a terrible practice.I just need one selector for the header to make it work with the shadow and the sticky behavior.
This is all I could read out of your question. Hope this answer helps you.
There is no point in trying to use z-index on the heading or the children as they can’t go behind (in the z axis sense) their parent.
If you want to keep that HTML structure then you could put the shadow on an after pseudo element instead of on the element itself. That will ensure that it comes above the children.
With this adjustment the rest of the CSS can remain as-is.
This snippet adds some more content so the stickiness can be checked.