Question

我正在尝试以HTML格式显示条形图表，可水平滚动，并使用<DIV>s作为条形图。

我还有'不可用'区域标记为浅灰色背景..它们的z指数为负，因为它们意味着“在”条形图“后面”。不互动。

一切正常，直到我尝试＆amp;样式页面;当我在<BODY>上设置背景并返回“可滚动图表”上的白色背景时，图表中不可用的灰色区域不再呈现。

处有一个相应的小提琴

<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，返回到#scrollContainer的白色BG），灰色区域不再可见。

简而言之，我似乎无法为图表设置白色背景而不会在内部呈现“负Z-index”div。根据W3C规范，我认为这应该是可行的，我可以采取另一种方法或者我缺少什么？

Answer 1

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

通过设置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;
}

父背景隐藏了z-index＆lt; 0的HTML背景？

1 个答案: