html - 如何将 z-index 与 DIV 和 PNG 图像一起使用？

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 在上面？

我需要将颜色设置为背景，但我必须看到垂直线（.png 图像的....图像的其余部分是透明的），所以绿色 div 上方的线条和绿色中的线条透明部分。

有人可以帮助我吗？

谢谢！

Answer 1

通过使用，您不仅可以确定currentz-index的堆栈级别，还可以确定其子元素的堆栈级别。见规格：z-index

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

1. 构成堆叠上下文的元素的背景和边框。
2. 具有负堆栈级别（最负优先）的子堆栈上下文。
3. 流入的、非内联级别的、非定位的后代。
4. 未定位的浮动。
5. 流入的、内联级的、非定位的后代，包括内联表和内联块。
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

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 3

Z-index 仅适用于具有指定定位的元素。所以任何绝对/相对元素的 z-index 都将高于非定位对象的 z-index。

Answer 4

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