CODEWITHSUNDEEP
htmlcssz-index
HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

CSS Z-Index stacking context puzzle

I have the following markup: http://jsfiddle.net/dy4TG/3/

<div class="slide-wrap">
    <div class="slide">
        <div class="text">Text here</div>
        <img src="image.jpg" />
    </div>
</div>

<div class="overlay"></div>

the .slide div must be absolutely positioned, and .slide-wrap would have position: relative.

Is it possible for the .overlay div to be between the image and the .text div? I need the stacking context to be like this (highest to lowest):

-Text

-Overlay

-Image

Thanks!

Live example here: http://movable.pagodabox.com (inspect the slideshow... in the specific context of this example, "overlay" has the class "kineticjs-content", and the .slide div is inside of the #slides parent div.

Upvotes: 1

Views: 481

Answers (2)

mash
mash

Reputation: 15229

The key is to make sure everything is positioned absolutely, this way you can float everything however you wish, with any z-index.

css: 

.overlay {
    width: 20px;
    height: 20px;
    background: #fff;
    z-index: 50;
    position:absolute;
    top:0;
    left:50px;
}
img{
    z-index: 20;
    position:absolute;
    top:0;
    left: 5px;
    width:100px;
    height: 100px;
    background: #000;
}
.text {
    z-index: 999;
    color: #888;
    position:absolute;
    top:0;
    left: 5px;
}
.slide-wrap{
    position:relative;   
}
.slide{
    position:absolute;
    top:0;
    left:0;
    width:100px;
}​

jsfiddle link: http://jsfiddle.net/a7Apz/3

Upvotes: 2

bfavaretto
bfavaretto

Reputation: 71918

You must give a z-index to .text, and it has to be the highest one if you want it to be on top of everything. And you must not give a z-index to .slide or .slide-wrap, as that would create a new stacking context, with the text and image nested in it. You need the text, the image and the overlay on the same stacking context.

Here is a jsfiddle to demonstrate. And here is the same idea applied to your jsfiddle.

Upvotes: 0

Related Questions