z- 색인이 제대로 작동하지 않습니다.

-1

사이드 바에있는 아래쪽 삼각형에 대한 z- 색인이 제대로 작동하는 데 문제가 있습니다. 3D 효과를 볼 수 있도록 머리글 상자 아래에 있어야합니다. 어떤 아이디어입니까?z- 색인이 제대로 작동하지 않습니다.

사이드 바

2013-03-15 Kevin

참조 : [내 웹 사이트의 일부 기능이 작동하지 않습니다. 게시물을 개선해야하는 이유 때문에 [링크를 붙여 넣을 수 있습니까?] (http://meta.stackexchange.com/q/125997/) –

당신이 겪고있는 문제는 당신이 중첩되는 것보다 낮은 요소의 Z- 인덱스를 설정하려고하는 것입니다이 불가능합니다 - 그래픽, 예를 들어 링크를 참조하십시오. https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context

당신이해야 할 일은 뒤로 이동하려는 요소가 앞으로 갈 것으로 예상되는 항목의 하위 하위 항목이 아닌지 확인하는 것입니다.

당신의 특별한 경우에 머리말의 스타일을 h2에 적용하여이를 해결할 수 있습니다.

또 다른 div를 추가 할 필요가 없도록 psuedo-element를 사용하는 것을 고려해 볼 수 있습니다. 귀하의 HTML은 다음과 같습니다

<div class="heading">Title goes here</div>

그런 다음이 규칙에 현재 .heading 스타일링에 추가 할 수

는 (상대 않도록주의하십시오 : 당신의 .heading에 위치를하지만 그것에서 어떤 Z- 인덱스를 제거) :

.heading:before{ 
content:" "; display:block; position:absolute; 
border-color: transparent #dfb704 transparent transparent; border-style: solid; border-width: 15px; 
height: 0px; width: 0px; 
left: -15px; bottom: -15px; 
z-index: -1; 
}

이렇게하면 z- 색인 스택에서 머리글 바로 아래에 삼각형이 설정됩니다. 다음은 간단한 예입니다. http://codepen.io/chrisboon27/pen/Fprxk

출처

2013-03-15 20:52:45

이것은 OpherV의 답변에 대한 의견보다는 그 답을 더 잘 나타냅니다. – Dutts

나는 이제 OpherV를 참조하기보다는 자체적으로 포함 된 답변이되도록 답변을 편집했습니다. –

frame가 heading의 하위 (노란색 제목으로) 우측에 있고, 그래서 frame위한 Z- 색인 특성은 영향을 미친다. 다른 z 깊이를 제공하려면 DOM 트리의 다른 분기에 배치해야합니다. 예를 들어, 둘 다 자식 요소 인 block이 될 수 있습니다.

출처

2013-03-15 20:36:03 OpherV

z- 색인이 제대로 작동하지 않습니다.

답변

관련 문제