CODEWITHSUNDEEP
csshtmlpositionz-index
Deepsy
Deepsy

Reputation: 3810

Z-index on a element with fixed position

I have a left panel with fixed position(it's always on the left side, nomatter how much you scroll) and also few elements in that left panel. On a certain event a mask appears(it goes over everything because position:fixed; z-index: 102).

My goal is when X event fires and the mask come up, to show up the holder element over the mask.

Here is a fiddle showing my problem: JSFIDDLE

Here is my HTML:

<div class="leftpanel">
    <div class="just-random-elem" style="height: 30px;">just an element to move the holder abit down</div>
    <div class="holder">asdasdas</div>
</div>
<div class="mask"></div>

<div style="height: 9999px;">Just to make sure both mask and leftpanel are with fixed positions.</div>

 and here's the CSS:

.mask {
    opacity: 0.85;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 101;
    background-color: #000;
}
.leftpanel {
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: red;
    padding: 15px;
}
.holder {
    width: 230px;
    height: 90px;
    background-color: #fff;
    z-index: 99999;  <<<<<<<<<< This is NOT working!
}

Upvotes: 0

Views: 497

Answers (1)

C3roe
C3roe

Reputation: 96455

Your .holder element is no positioned, so z-index simply has no effect on it. You need to add a position value different from the default static – relative will do.

http://jsfiddle.net/DJA5F/4 works that way in every browser I tested – except Chrome. Can’t spontaneously say if Chrome is handling stacking contexts correct here and the others are not – or if it’s the other way around.
Works in Chrome as well if you put #mask into .leftpanel: http://jsfiddle.net/DJA5F/5 – might not be the nicest workaround, but since it’s postioned fixed, it does not actually matter, since the orientation for fixed is the viewport.

Upvotes: 2

Related Questions