CODEWITHSUNDEEP
htmlcssbackgroundz-index
Thomas W
Thomas W

Reputation: 14164

HTML backgrounds with z-index<0 hidden by parent background?

I'm trying to display a bar-type chart in HTML, horizontally scrollable, and use <DIV>s for the bars.

I also have 'unavailable' regions marked as with a light grey background.. they have z-index negative, as they are meant to be 'behind' the bars & not interactive.

This all works OK, until I try & style the page; when I set a background on the <BODY> and return to a white background on the "scrollable chart", the unavailable grey regions within the chart no longer render.

Here's a SSCE: with a corresponding Fiddle at http://jsfiddle.net/gZ25A/

<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>

As posted, the HTML will show the grey 'unavailable regions'. But uncomment the first two styles (BG for body, return to white BG for #scrollContainer) and the grey regions are no longer visible.

In short, I can't seem to set a white background for the chart without problems rendering the "negative Z-index" divs inside. I thought this was supposed to be do-able according to W3C spec, is there another approach I can take or what am I missing?

Upvotes: 0

Views: 1343

Answers (1)

Thomas W
Thomas W

Reputation: 14164

And, on the fifth attempt, I've finally found the answer.

The container's background can be prevented from hiding/ overlaying child backgrounds by setting z-index:0; position:relative;.

Specifically:

body {
    background: #f4f4f4;
}
#scrollContainer {
    background: white;
    /* THIS IS THE REQUIRED FIX, HERE --
     *   - setting 'z-index:0' and 'position:relative'.
     */
    position: relative;
    z-index: 0;
}

Upvotes: 4

Related Questions