CSS Overlay not allowing DIv on top

Asked Apr 14 '16 at 15:18

Active Apr 14 '16 at 15:27

Viewed 63 times

Hey all I am having an issue with trying to set a div on top of the full screen overlay.

For some reason its not going over the top of the overlay - even when set to a higher z-index than the overlay itself.

Here is the jsfiddle example. The HELLO! should be on top of the overlay but it is not:

JS:

var overlay = jQuery('<div id="overlay"> </div>');

overlay.appendTo(document.body);

CSS:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

#tester {
  z-index: 2001;
}

HTML:

Lots of text to create scrollbars Lots of text to create scrollbars Lots of text to create
scrollbars Lots of text to create scrollbars......<div id="tester">HELLO!</div>.......Lots
of text to create scrollbars

asked Apr 14 '16 at 15:18

StealthRT

10,108
40
183
342

2

`z-index` has no effect unless the element is also positioned, i.e. a position other than `static` – j08691 Apr 14 '16 at 15:19
1

revised fiddle: https://jsfiddle.net/q56qvbha/3/ – Michael Benjamin Apr 14 '16 at 15:22
position can be 'absolute', 'relative' or 'fixed' – SPlatten Apr 14 '16 at 15:24
@SPlatten, or `sticky` – Michael Benjamin Apr 14 '16 at 15:27
@Micheal_B, depends where you are getting your information from: http://www.w3schools.com/cssref/pr_pos_z-index.asp – SPlatten Apr 14 '16 at 15:44
1

@SPlatten, I wouldn't rely on w3schools as an authoritative reference. It may be a good site for learning basic concepts, but for accurate and official references you should see W3C documentation. https://drafts.csswg.org/css-position/#pos-sch – Michael Benjamin Apr 14 '16 at 15:54

CSS Overlay not allowing DIv on top

0 Answers0