CODEWITHSUNDEEP
jqueryhtmlcssz-index
Gislef
Gislef

Reputation: 1637

Jquery toggle add z-index

I'm trying to do what Toogle open up div test as the sample image:

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/

I trying usage z-index, but do not work

SOLUTION

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

Thank you @D.Gramm

Upvotes: 3

Views: 155

Answers (1)

daveg
daveg

Reputation: 399

If you want z-index to work you need to have the position set at absolute or relative. Then z-index will take effect.

Upvotes: 4

Related Questions