Question

I have this css:

<style type="text/css">

    .chart {
        position: relative;
        width:300px;
        height:85px;
        padding:0;
        margin:0;       
        background:url("prova2.png") center bottom no-repeat;
        z-index:1;
    }

    .chart div{     
        float:left;
        font-size:13px;
        text-align:center;
    }

    .chart .green{
        position:absolute;
        left: 50px;
        top:50px;
        height:35px;
        width:50px;
        background: green;
    }

</style>

and this html code:

<div class="chart">

    <div style="margin-left:15px;">
        <b>-2</b><br />
        0.1234
    </div>  
    <div style="margin-left:27px;">
        <b>-1</b><br />
        0.1234
    </div>  
    <div style="margin-left:27px;">
        <b>MEDIA</b><br />
        0.1234
    </div>  
    <div style="margin-left:18px;">
        <b>+1</b><br />
        0.1234
    </div>  
    <div style="margin-left:27px;">
        <b>+2</b><br />
        0.1234
    </div>  

    <div class="green"></div>   

</div>

as you can see I use prova2.png that has transparencies.

This is the image:

The result of the code is:

has you can see the green rectangle is ABOVE the image, BUT i really do not understand the reason, because i used the z-index and the div (with the image as background) has z-index:1, so…

Why green div IS above?

I need to set dinamically a color as background, BUT I must the see the vertical lines (of the .png image….the rest of the image is transparent), so the lines ABOVE the green div, and the GREEN in the transparent parts.

Could someone help me?

Thanks!

Answer 1

By using z-index you determine not only the stack level of the current, but also of its child elements. See the z-index specification:

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

EDIT: A very simple way to fix this issue is to create a new <div> and place your image there:

<div class="chart">
    <!-- other divs -->
    <div class="green"></div>
    <div class="chartmap"></div>
</div>

.chart {
    position: relative;
    width:300px;
    height:85px;
    padding:0;
    margin:0;
    z-index:1;
}

.chart div{
    /* same as above */
}

.chart .green{
    /* same as above */
}

.chart .chartmap{
    position: absolute; float:none;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: 0; padding: 0; border: 0 none;

    background:url("prova2.png") center bottom no-repeat;
    z-index:1;
}

This time z-index will work since all elements share the same stacking context. Another possible solution is to use a real <img> and use a negative z-index on your <divs>.