My absolute positioned div is covering my other div despite lower z-index

Question

This is so strange that I can't even replicate the error in jsfiddle despite copy-pasting the code.

Basically I have it like this:

<div class="container">
    <div class="absolute-background" />
    <div class="where-is-this" />
</div>

With this CSS:

.container {
  background: transparent;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.absolute-background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: blue;
  z-index: 0;
}

.where-is-this {
  height: 100px;
  width: 100%;
  z-index: 1000000;
  background: red;
}

This should display a red box at the top of the screen, as it does in this fiddle: https://jsfiddle.net/Lmj6d625/

However, in my actual page (on the same browser) the blue covers EVERYTHING. I can even add new divs below with text and they are completely hidden.

Screenshot:

Where is my div?!

Anyone have any suggestions how to troubleshoot this?

All I can say is that `z-index` does not apply if no alternate positioning has been applied (aka `relative` or `absolute` instead of `static`) — somethinghere, Apr 18 '18 at 15:18
`div` elements are _not_ self-closing e.g. don't do this: `
`. Because you've done this, `.where-is-this` is _inside_ `.absolute-background`. The browser is making it's best guess as to what you want due to incorrect HTML syntax. — chazsolo, Apr 18 '18 at 15:20
@SophieD look at the rendered code instead in the fiddle - elements are nested, not siblings. — chazsolo, Apr 18 '18 at 15:21
@chazsolo That's what the screenshot shows. They are not nested. — SophieD, Apr 18 '18 at 15:25
The code in your screenshot and the rendered elements in the jsFiddle are different. Go into your jsfiddle and change your elements to `
` and you'll see the red element disappears. — chazsolo, Apr 18 '18 at 15:26
@SophieD, use position :relative for the class .where-is-this and also provided screenshot of inspected element - .absolute-background — Naga Sai A, Apr 18 '18 at 15:26

Johannes · Answer 1 · 2018-04-18T16:06:27.987

0

1.) DIV Tags can't be self closing

2.) You need a height for the body tag, otherwise it will have 0 height, and that will also apply to container and .absolute-background, making them invisible.

3.) You need position: absolute or position: relative for the z-index of the red DIV to become effective (fixed would also work, but then it wouldn't scroll with the rest of the page)

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  background: transparent;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.absolute-background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: blue;
  z-index: 0;
}

.where-is-this {
  position: absolute;
  height: 100px;
  width: 100%;
  z-index: 1000000;
  background: red;
}

<div class="container">
  <div class="absolute-background"></div>
  <div class="where-is-this"></div>
</div>

edited Apr 18 '18 at 16:06

answered Apr 18 '18 at 15:21

Johannes

64,305
18
73
130

I don't want it to be `absolute` positioned. Your first point is wrong, and I do have a 100% height on body and html. – SophieD Apr 18 '18 at 15:22
well, if you are convinced about that (i.e. self-closing DIV tags), good luck to you ;-) – Johannes Apr 18 '18 at 15:24
You seem to be right, and jsfiddle doesn't understand self-closing divs which is why it showed up there but on my page the self-closing tags worked, which is why nothing showed up. Geez! – SophieD Apr 18 '18 at 15:26
For some more info on the first point: https://stackoverflow.com/questions/5455768/why-do-browsers-think-this-div-tag-isnt-immediately-ended – chazsolo Apr 18 '18 at 15:29
The "self-closing" tags you are using are just differently interpreted by different browsers, fiddles etc. which try to make the best out of it, but this way or that, they are invalid HTML – Johannes Apr 18 '18 at 15:30

score 0 · Accepted Answer · answered Apr 18 '18 at 15:27

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser. Thanks to Evert for this answer

My absolute positioned div is covering my other div despite lower z-index

2 Answers2