절대 위치 부모를 절대 위치 자식 위에 표시하십시오.

Question

절대 위치 자식을 절대 위치 부모 뒤에 표시하려고합니다. 파란 부모는 빨간 아이 위에 나타납니다.

자식에 z-index: -1 설정을 시도했지만 빨간색 자식을 표시하지 않습니다.

.container { 
 
    position:relative; 
 
    background-color:grey; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
.parent { 
 
    background-color:blue; 
 
    position:absolute; 
 
    top: 50px; 
 
    left: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
} 
 
.child { 
 
    position:absolute; 
 
    top:-5px; 
 
    right: 0px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    background-color:red; 
 
}

<div class="container"> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div> 
 
</div>

https://jsfiddle.net/dwil30/mh3qw64x/

Answer 1

음 ... 그것은 조금 해키 보인다,하지만 전화 :

당신은 다른 렌더러 이후 container의 z-index를 지정해야 자녀를 비교할 "기준"가치가 없습니다. 여기

는 작업 바이올린입니다 :

Answer 2

별도

https://jsfiddle.net/cmvwLseo/

건배 아동 및 부모 div의 그들은 다음 위치하는 로직을 업데이트 공통의 "용기"에 모두 배치 상대적있어 그래서 자식을 적절히 설정하고 각각의 z-index 속성을 설정합니다. 그것은 당신이 div의에이 부모/자식 관계를 유지하는 것이 100 % 필요

.container { 
 
    position:relative; 
 
    background-color:grey; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 

 
.parent { 
 
    background-color:blue; 
 
    position:absolute; 
 
    top: 50px; 
 
    left: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
    z-index:2; 
 
} 
 
.child { 
 
    position:absolute; 
 
    top:50px; 
 
    left: 90px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    background-color:red; 
 
    z-index:1; 
 
}

<div class="container"> 
 
    <div class="parent"> 
 
    </div> 
 
    <div class="child"> 
 
    </div> 
 
</div>