0

バータイプのチャートを HTML で表示し、水平方向にスクロール可能で、バーに使用しようとしています<DIV>s。

また、明るい灰色の背景でマークされた「使用できない」領域もあります。バーの「後ろ」にあり、インタラクティブではないため、z-index が負になっています。

ページのスタイルを試してみるまで、これはすべて正常に機能します。で背景を設定<BODY>し、「スクロール可能なチャート」で白い背景に戻ると、チャート内の使用できない灰色の領域がレンダリングされなくなります。

ここに SSCE があります: http://jsfiddle.net/gZ25A/で対応する Fiddle を使用します。

<html>
<head>
    <style>

        /* COMMENTED OUT,  cause grey "unavailable regions" not to render.
        body {
            background: #f4f4f4;
        }
        #scrollContainer {
            background: white;
        }
        */

        #scrollContainer {
            height: 300px;
            overflow: auto;
        }
        .scrollContent {
        }
        .wideTable {
            width: 1100px;
        }


        .positionContainer {
            position: relative;
            width: 1100px;
            height: 50px;
        }
        .bar {
            position: absolute;
            background: #0000ff;
            height: 100%;
        }
        .markBG {
            position: absolute;
            background: #e0e0e0;
            z-index: -1;
            height: 100%;
        }
    </style>
</head>
<body>
    <h2>Headline</h2>

    <div id='scrollContainer'>
        <div id='scrollContent'>

            <table class='wideTable'>
            <tr>
                <td>
                    <div class='positionContainer'>
                        <div class='markBG' style='left:100px; width:30px;'>&nbsp;</div>
                        <div class='markBG' style='left:400px; width:30px;'>&nbsp;</div>
                        <div class='markBG' style='left:700px; width:30px;'>&nbsp;</div>
                    </div>
            <tr>
                <td>
                    <div class='positionContainer'>
                        <div class='markBG' style='left:100px; width:30px;'>&nbsp;</div>
                        <div class='markBG' style='left:400px; width:30px;'>&nbsp;</div>
                        <div class='markBG' style='left:700px; width:30px;'>&nbsp;</div>

                        <div class='bar' style='left:50px; width:200px;'>Bar A</div>
                        <div class='bar' style='left:900px; width:200px;'>Bar B</div>
                    </div>
            </table>
        </div>
    </div>

    More Stuff Down Here
</body>
</html>

投稿されたように、HTML には灰色の「利用できない地域」が表示されます。ただし、最初の 2 つのスタイル (body の場合は BG、#scrollContainer の場合は白の BG に戻る) のコメントを外すと、灰色の領域が表示されなくなります。

要するに、内部の「負の Z インデックス」div を問題なくレンダリングすることなく、チャートの白い背景を設定することはできないようです。W3C仕様によれば、これは実行可能であるはずだと思っていましたが、他に取るべきアプローチはありますか、それとも何が欠けていますか?

4

1 に答える 1

4

そして、5回目の試行で、ようやく答えを見つけました。

を設定することで、コンテナの背景が子の背景を隠したり重ねたりするのを防ぐことができますz-index:0; position:relative;。

具体的には：

body {
    background: #f4f4f4;
}
#scrollContainer {
    background: white;
    /* THIS IS THE REQUIRED FIX, HERE --
     *   - setting 'z-index:0' and 'position:relative'.
     */
    position: relative;
    z-index: 0;
}
于 2013-09-03T02:08:43.147 に答える