중첩 된 하위 요소의 순서를 반대로하는 방법

HTML

<div class="a"> 
    <div class="b"> 
    <div class="c"></div> 
    </div> 
</div>

는 CSS

이제

.a, .b, .c { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

.a { 
    background: red; 
    z-index: 999; 
} 

.b { 
    background: green; 
    margin: 40px; 
    z-index: 500; 
} 

.c { 
    background: gray; 
    margin: 40px; 
    z-index: 100; 
}

, 난이 원하는 있다고 가정 정확하게 정반대 즉, 모두 위에 빨간색. 위치가 relative 인 Z- 색인을 사용해 보았지만 작동하지 않습니다. 여기에 jsfiddle 데모가 있습니다

출처

2013-10-18 Ashish Rawat

그냥 사용하거나 자바 스크립트 또는 jQuery를 바닥에 중간에 녹색과 회색 위에 빨간 사업부를 갖고 싶어해야 할? – mskydt86

스태킹 컨텍스트는 요소를 중첩 할 때마다 다시 설정됩니다. 즉, 'z-index'값은 형제를 비교할 때만 관련이 있으며 부모 - 자식 중첩을 비교할 때가 아닙니다. 부모는 Z- 색인에 관계없이 항상 어린이 뒤에있을 것입니다. – Terry

http://stackoverflow.com/questions/1806421/css-parent-element-to-appear-above-child –

수 없습니다. 부모는 항상 아이들 뒤에있을 것입니다 as z-index values are stacked.

캔버스 스태킹 맥락의 관점에서 설명에 렌더링 트리가 그려진되는 순서. 스태킹 컨텍스트에는 추가 스태킹 컨텍스트가 포함될 수 있습니다. 스태킹 컨텍스트는 부모 스태킹 컨텍스트의 관점에서 볼 때 원자입니다. 다른 스태킹 컨텍스트의 상자는 해당 상자 사이에 올 수 없습니다. - W3 .a에 z-index을 설정하여 http://www.w3.org/TR/CSS2/visuren.html#z-index

은 또한 모든 아이들에 같은 z-index를 설정한다. 예를 들어, 을 .a - .b에 설정하고 .c도 같은 색인을 사용하므로 쓸모가 없습니다. 이를 달성하기 위해 요소는 부모 또는 다른 자식이 될 수 없으며이 요소가 작동하려면 형제가되어야합니다. 여기

는 그들이 형제 경우처럼 보일 것 인 것이다 - it works!

출처

2013-10-18 16:57:21

중첩 된 하위 요소의 순서를 반대로하는 방법

답변

관련 문제