如何使用带有DIV和PNG图像的z-index？

Question

我有这个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>

和这个HTML代码：

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

你可以看到我使用带透明胶片的prova2.png。

这是图片：

代码的结果是：

你可以看到绿色矩形是上面的图像，但我真的不明白原因，因为我使用z-index和div（以图像为背景）有 z-index：1 ，所以......

为什么绿色div在上面？

我需要设置dinamically一种颜色作为背景，但我必须看到垂直线（.png图像....图像的其余部分是透明的），所以线条超过绿色div，以及绿色透明部分。

有人可以帮助我吗？

谢谢！

Answer 1

通过使用z-index，您不仅可以确定当前的堆栈级别，还可以确定其子元素的堆栈级别。 See the z-index specification:

  

在每个堆叠上下文中，以下按顺序绘制以下图层：

     

  
1. 构成堆叠环境的元素的背景和边框。
  
2. 子堆叠上下文具有负堆栈级别（最多为负数）。
  
3. 流入的，非内联级别，未定位的后代。
  
4. 未定位的花车。
  
5. in-flow，内联级别，非定位后代，包括内联表和内联块。
  
6. 堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。
  
7. 具有正堆栈级别的子堆叠上下文（最少积极的第一个）。
  

编辑：解决此问题的一种非常简单的方法是创建新的<div>并将图片放在那里：

<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;
}

此时z-index将起作用，因为所有元素共享相同的堆叠上下文。另一种可能的解决方案是使用真实<img>并在z-index上使用否定<divs>。

Answer 2

Z-index仅适用于具有指定位置的元素。因此，任何绝对/相对元素的z-index都将高于未定位对象。

Answer 3

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

将父div添加到您的子div并将其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>

Answer 4

从.chart z-index删除后，您不想为父级设置z-index。

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>

和HTML部分：

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