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

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -