Jquery切换添加z-index

时间:2016-01-25 22:44:48

标签: jquery html css z-index

我试图将Toogle打开div测试作为示例图像:

enter image description here

的CSS:

.area1 {
    width: 50px;
    height: 200px;
    background: red;
    display: inline-block;
    z-index:99;
}
.area2 {
    width: 50px;
    height: 200px;
    background: green;
    display: inline-block;
    z-index:99;
}

Jquery的

$("#Go2").click(function () {
    $(".area1").animate({width:'toggle'},350);
    $(".area2").hide();

});
$("#Go").click(function () {
    $(".area2").animate({width:'toggle'},350);
    $(".area1").hide();
});

http://jsfiddle.net/gislef/kcve9qhg/

我尝试使用z-index,但不起作用

http://jsfiddle.net/gislef/kcve9qhg/6/

谢谢@ D.Gramm

1 个答案:

答案 0 :(得分:4)

如果您希望z-index工作,您需要将位置设置为绝对或相对。然后z-index将生效。