Not understanding the stacking context of pseduo-elements

Question

Here is my jsfiddle: http://jsfiddle.net/vSJnL/4/

My #generated div has a z-index of 1 while the pseudo-element has a z-index of -1 but only the divs text is shown instead of the div appearing above the generated-content, like I had expected. Also if I give the pseudo-element a positive z-index and the div a greater z-index the <div> remains behind the pseudo-element ..

Can anyone explain why this would be the case?

Answer 1

Let's say your content would not be empty (for clearness), i.e. content: "generated";: http://jsfiddle.net/vSJnL/5/

Then it would render like:

<div id="over">
    <div id="generated">
    Hello World!
    <span>generated</span>
    </div>
</div>

See http://jsfiddle.net/vSJnL/6/

See the specification at w3c: http://www.w3.org/TR/CSS21/generate.html#before-after-content

So the generated element is inside the div#generated after the text node and not after div#generated itself.

With this in mind the stacking context is self-explanatory: the pseudo-element with z-index: -1 becomes the lowest stacking-position (only background is subjacent). The Textnode as a result is overlying the pseudo-element.

Answer 2

I experimented with your HTML elements:

<div id="over" class="case{0,1,2}">
    <div class="generated">Hello World!</div>
</div>

and looked at 3 cases using the following CSS. I altered the styling of the generated content slightly just for demonstration:

.generated {
    background-color: gray;
    border: 1px dotted black;
    color: white;
    width: 20rem;
    position: relative;
}
.generated::after {
    content:"\00A0";
    display: block;
    width: 0;
    height: 0;
    border-width: 20px;
    border-color: khaki blue khaki red;
    border-style: solid;
    position: absolute;
    left: 0;
    top: 0;
}

.case0 .generated {
}
.case0 .generated::after {
}

.case1 .generated {
}
.case1 .generated::after {
    z-index: -1;
}

.case2 .generated {
    z-index: 200
}
.case2 .generated::after {
    z-index: -1;
}

By default, I don't set the z-index and the generated content is made to slide over the text note content, just overlapping of content using absolute positioning.

In case 1, apply z-index: -1 to the generated content and it moves below the the element.

In case 2, apply z-index: 200 (or any number 1 or greater) to .generated and z-index: -1 to the generated content and in this case, the generated content appears between the node text and the element.

In case 1, you are simply sifting the z-index of the generated content 1 down the z-axis. Since the node text and its container are on the same z-axis level, the generated content appears below the container and node text.

In case 2, you are shifting the node text up from its container, and then shifting the generated content down 1 below the node text, so the generated content is above the container but below the node text.

This is may be a useful CSS technique.

Fiddle reference: http://jsfiddle.net/audetwebdesign/9sR8B/