2

私はこの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画像の...png画像の残りの部分は透明です）垂直線を表示する必要があるため、緑色のdivの上の線と、透明なパーツ。

誰かが私を助けてもらえますか？

ありがとう！

4

4 に答える 4

5

を使用して、現在z-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>。

于 2012-04-18T19:17:41.843 に答える
2

Zインデックスは、指定された位置にある要素に対してのみ機能します。したがって、絶対/相対要素のz-indexは、配置されていないオブジェクトのz-indexよりも高くなります。

于 2012-04-18T19:19:45.587 に答える
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>
于 2012-04-18T19:21:56.653 に答える
0

.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>
于 2012-04-18T20:33:11.463 に答える