CODEWITHSUNDEEP
htmlcss
Dail
Dail

Reputation: 4602

How to use z-index with DIV and PNG image?

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:

enter image description here

The result of the code is:

enter image description here

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!

Upvotes: 2

Views: 4322

Answers (4)

Sampo Sarrala
Sampo Sarrala

Reputation: 4878

From .chart z-index is removed, you dont want to set z-index for parent.

CSS:

<style type="text/css">

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

    .chart_bg_image {
        position: absolute;
        width:300px;
        height:85px;
        padding:0;
        margin:0;       
        background:url("prova2.png") center bottom no-repeat;
        z-index: 2;  /* This is above others but equals with .chart div (other than .green) */
    }

    .chart div{     
        position: relative; /* For z-index */
        float:left;
        font-size:13px;
        text-align:center;
        z-index: 2;  /* These are above others but equal with background image */
    }

    .chart .green{
        position:absolute;
        left: 50px;
        top:50px;
        height:35px;
        width:50px;
        background: green;
        z-index: 1;  /* This is below background image and everything else */
}

</style>

And HTML part:

<div class="chart">

    <div class="chart_bg_image"></div>  <!-- HERE IS NEW PLACEHOLDER FOR IMAGE -->

    <div style="position: absolute"> <!-- Keep childs where they belong -->
    <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>
    <div class="green"></div>   

</div>

Upvotes: 0

Zeta
Zeta

Reputation: 105885

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>.

Upvotes: 5

Jonathan Payne
Jonathan Payne

Reputation: 2223

jsFiddle: http://jsfiddle.net/Mn7rJ/

Add a parent div to your child divs and give it position:absolute;

<style type="text/css">
    .chart
    {
        position: relative;
        width:300px;
        height:85px;
        padding:0;
        margin:0;       
        background:url("prova2.png") center bottom no-repeat;
    }
    .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>

<div class="chart">
    <div class="green"/>
    <div style="position:absolute;"> <!-- add this div -->
        <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>
</div>

Upvotes: 2

Ruslan Osipov
Ruslan Osipov

Reputation: 5843

Z-index works only for element with specified positioning. So any absolute/relative element's z-index will be higher than non-positioned object's.

Upvotes: 2

Related Questions