Geek asks and answers

Do not understand the context of stacking pseudo-elements

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

My #generateddiv is z-indexof 1, while the pseudo-element is z-indexof -1, but instead of the div displayed above the generated content, only divs text is displayed, as I expected. Also, if I give the pseudo-element a positive z-index and div is a larger z-index , <div>remains behind the pseudo-element ..

Can anyone explain why this is so?

+5
source share
2 answers

Say your content will not be empty (for clarity), i.econtent: "generated"; .: http://jsfiddle.net/vSJnL/5/

Then it will look like this:

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

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

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

, div #, node, , div # .

: z-index: -1 ( ). Textnode .

+5

HTML-:

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

3 , CSS. :

.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;
}

z-index, , , .

1 z-index: -1 .

2 z-index: 200 ( 1 ) .generated z-index: -1 , node .

1 z- 1 z. node z, node .

2 node , 1 node, , node.

CSS.

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

+2

More articles:


All Articles