이 pseduo 요소 여기

Question

의 스태킹 문맥을 이해하지 않으면 내 jsfiddle입니다 : http://jsfiddle.net/vSJnL/4/이

내 #generated 사업부는 의사 요소가있는 동안 하나의 z-index에만 div의 텍스트가 표시됩니다 z-index의 -1 하지만 예상했던 것처럼 생성 된 콘텐츠 위에 나타나는 div 대신. 또한 pseudo-element에 양의 z- 인덱스를주고 div에 더 큰 z- 인덱스를 지정하면 <div>은 behind the pseudo-element이됩니다.

왜 이런 경우가 될지 설명 할 수 있습니까?

Answer 1

즉 content: "generated";, 이제 (선명도에 대한) 콘텐츠를 비워 둘 수 없습니다 것입니다 가정 해 봅시다 :

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

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

는 W3C의 사양을 참조하십시오 : 같은 http://jsfiddle.net/vSJnL/5/이

그런 다음 렌더링 것입니다 : http://www.w3.org/TR/CSS21/generate.html#before-after-content

따라서 생성 된 요소 은 inside div #은 텍스트 노드 다음에 생성되고 div # 이후에는 생성되지 않습니다. 이것을 염두

적층 컨텍스트 자명하다 : z-index: -1와 유사 요소는 최저 적층 위치 (단지 배경 직하 임)가된다. 결과적으로 텍스트 노드가 의사 요소를 덮어 씁니다.

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

을 다음과 같은 CSS를 사용하여 삼가지 경우 보았다 :

Answer 2

나는 당신의 HTML 요소와 실험.

.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)에서, 상기 생성 된 콘텐츠와 .generatedz-index: -1z-index: 200에 (또는 임의의 수의 1 이상)를 적용하고,이 경우에는, 생성 한 콘텐츠 노드 텍스트와 소자 사이에 나타난다.

경우 1에서 생성 된 내용 1의 z- 색인을 z 축 방향으로 내려보기 만하면됩니다. 노드 텍스트와 해당 컨테이너가 동일한 z 축 레벨에 있으므로 생성 된 내용이 컨테이너 및 노드 텍스트 아래에 나타납니다.

경우 2에서 노드 텍스트를 컨테이너에서 위로 이동 한 다음 생성 된 내용을 노드 텍스트 아래로 1 낮추어 생성 된 내용이 컨테이너 위이지만 노드 텍스트 아래에 있도록합니다.

이것은 유용한 CSS 기술 일 수 있습니다.

바이올린 참조 : http://jsfiddle.net/audetwebdesign/9sR8B/