CODEWITHSUNDEEP
javascriptjqueryhtmlcssz-index
user3475724
user3475724

Reputation:

Z-index is broken

Why #opacwall covers #moviechoose ?

<div id="moviechoose" style="width: 50px;height: 50px;background: #f2c249;border: none;position:absolute;left:50px;top:50px;z-index:1;border-radius:130px; display: none;"></div>

JQuery:

 $('.circlemenubutton').click(function(){

    $('#moviechoose').show(200);
    $('<div/>', {
        'id':'opacwall',
        'style':' width: 100%;height: 100%;background: black;border: none;position:fixed;left:0%;top:0%;z-index:0;opacity:0.6'

    }).appendTo('body');
    });

Upvotes: 0

Views: 72

Answers (1)

Andy Guibert
Andy Guibert

Reputation: 42936

Here is a working demo of what I think you're trying to do https://jsfiddle.net/mzg1v0q5/ using jQuery-2.1.3

People often get confused with z-index, so I would recommend reading this article to fully understand it: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

The key piece of information (in my opinion) is because z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. You have done this in your example code, so hopefully looking at the fiddle posted will help you out.

Upvotes: 2

Related Questions