2017-04-03 4 views
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を表示しながら黒に背景を変更したいと思います:次のように

コードが使用されメディア "要素。どのようにしてこのような行動を達成できますか?

+3

([位置絶対で動作していないZインデックス]の可能性のある重複http://stackoverflow.com/questions/14483589/z-index-not-working-with-position-absolute) – mhodges

答えて

0

相対positoinを適用

$('#media').css({ "position": "relative" }); 

スニペット以下

$('.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" }); 
 
    $('#media').css({ "position": "relative" }); 
 
});
.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>