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 将显示灰色的“不可用区域”。但是取消注释前两种样式（BG 代表 body，返回白色 BG 代表#scrollContainer）并且灰色区域不再可见。

简而言之，我似乎无法为图表设置白色背景而不会出现渲染“负 Z-index”div 内部的问题。我认为根据 W3C 规范这应该是可行的，我可以采取另一种方法还是我错过了什么？

4

1 回答 1

4

而且，在第五次尝试中，我终于找到了答案。

可以通过设置来防止容器的背景隐藏/覆盖子背景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 回答