Why does z-index not work on my header to show my shadow?

Question

My content below my header positions itself above the header which I gave a higher z-index.

As a consequence, it hides the shadow on the header.

Even stranger behavior is when I add a negative margin on the content below: You can see the header text but now has a background color from the content.

header {
  z-index: 999999;
  background-color: green;
  width: 100%;
  text-align: center;
  box-shadow: 0 0ex 2ex hsl(0, 0%, 0%);
  vertical-align: middle;
}
div {
  background: red;
  height: 8em;
  /* margin-top: -5em; */
}

<body>
    <header>Some text<br><br>Some more text</header>
    <div>My div</div>
</body>

I tried putting a negative z-index on my content and that solves the problem, but then all elements in my content become inactive.

(E.g., I can't click or hover anything any more.)

I did checked that duplicate, but I must have tried two things at a time. Sorry, guys. Unfortunately I cannot delete my question now. It says "you cannot delete .. because others invested time in answering it". :'( Just want to lower the fragmentation of stackoverflow. — e-motiv, Dec 20 '21 at 19:28
The first sentence is nearly incomprehensible (e.g., are one or more words missing?). Can you [fix it](https://stackoverflow.com/posts/70411855/edit)? (But ***without*** "Edit:", "Update:", or similar - the question should appear as if it was written today). — Peter Mortensen, Dec 31 '21 at 16:17

score 0 · Answer 1 · edited Dec 31 '21 at 16:19

When you are working with z-index, be sure to set positions to the elements. Otherwise it can generate strange behavior.

So here just add position: relative to the header and it will work well (even in the case you add that negative margin to the div).

In this particular example, there isn't any need to add position: relative to the div (in order to solve the issue), but you will not make a mistake doing so. When it comes to playing with z-index, setting positions to the overlapping elements helps the browser to understand the context better.

header {
  z-index: 999999;
  background-color: green;
  width: 100%;
  text-align: center;
  box-shadow: 0 0ex 2ex hsl(0, 0%, 0%);
  vertical-align: middle;
  position: relative;
}
div {
  position: relative;
  background: red;
  height: 8em;
  margin-top: -5em;
}

Here is, BTW, a very good article covering all the z-index issues: Four reasons your z-index isn’t working (and how to fix it)

score -1 · Answer 2 · edited Dec 31 '21 at 16:28

-1

To add to Biswajit's answer, here's a good explanation (Stack Overflow answer) on why position is needed.

edited Dec 31 '21 at 16:28

Peter Mortensen

30,738
21
105
131

answered Dec 19 '21 at 13:42

Spankied

1,626
13
21

Related: [Stack Overflow is not a forum](http://meta.stackexchange.com/a/92115). It is a [think tank](http://meta.stackoverflow.com/a/325681). And: *[Why do I need 50 reputation to comment? What can I do instead?](https://meta.stackexchange.com/questions/214173/)*. – Peter Mortensen Dec 31 '21 at 16:25
I think a comment would be more appropriate than a link-only answer. You have enough reputation points to comment. – Peter Mortensen Dec 31 '21 at 16:26

Why does z-index not work on my header to show my shadow?

2 Answers2