0
私が現在持っている混乱は、divタグのz-index値を大きく設定しても、CSSを操作した後にもう上にないことです。より大きなスタックを持つZ-インデックスが要素の前にありませんか?
$('.lights').on('click',function(){
$('<div id="lightsOut"></div>').appendTo('body');
$('#lightsOut').css({
\t opacity: 0,
width: $(document).width(),
height: $(document).height()
})
.addClass('lightsOut')
.animate({opacity: 1}, 400);
$('#media').css({ "z-index": "10000" });
});
.lightsOut {
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 0px;
background-color: #000;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h4>Title</h4>
<div id="media">
<button class="lights">Lights Out</button>
<h4 style="color: grey">Another Title</h4>
</div>
</body>
を「DIVメディア」-elementをクリックすると、私はまだ「のdivを表示しながら黒に背景を変更したいと思います:次のように
コードが使用されメディア "要素。どのようにしてこのような行動を達成できますか?
([位置絶対で動作していないZインデックス]の可能性のある重複http://stackoverflow.com/questions/14483589/z-index-not-working-with-position-absolute) – mhodges