javascript - 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'); });
here working demo of think you're trying https://jsfiddle.net/mzg1v0q5/ using jquery-2.1.3
people confused z-index, recommend reading article understand it: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
the key piece of information (in opinion) because z-index work on element position property has been explicitly set absolute, fixed, or relative
. have done in example code, looking @ fiddle posted out.
Comments
Post a Comment