动态添加和删除 z-index 的 css

Question

$('.sn').css({'z-index':'-1000'}); （隐藏整个组）加载整个班级，从那个班级我想显示或应用 css $('#item1').css({'z-index':'1000'});（只显示组中的一个），点击某个元素 dynamicaly 但这不会发生，请帮助我？当我使用 hide() 和 show() 方法时，它工作正常。

//on click ..
$(document).on('click','#slider1prev',function(){   

    selected = selected-1;



    if(my_text != ""){
        $('#noteImage'+selected).css({'z-index':'1000'});
        $('#noteText'+selected).css({'z-index':'1000'});
    }

});

//负载..

$('.sn').css({'z-index':'-1000'});
$('.notes').css({'z-index':'-1000'});

Answer 1

Why don't you just use show() and hide() methods instead? Z-index just changes the stack-order of the elements and only work on positioned elements. So if you want to use z-index. set the elements position property either to absolute or to fixed.

Read More about z-index.

so instead of doing

.css({'z-index':'1000'});

do

.css({'position': 'absolute', 'z-index':'1000'});

or

.css({'position': 'fixed', 'z-index':'1000'});