Question

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.

Answer 1

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