여러 항목에서 Z- 색인이 예상대로 작동하지 않습니다.

Question

div 앞에 나오면 div를 다른 div 위에 표시되게하려면 어떻게해야합니까?

아래 예제를 보면 가장 앞에있는 로고 div가 필요합니다.

div 
 
{ 
 
    height: 200px; 
 
    width: 200px; 
 
    background: #0f0; 
 
} 
 

 
.parent 
 
{ 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.child 
 
{ 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 70px; 
 
    left: 30px; 
 
    background: #f00; 
 
    height: 60px; 
 
} 
 

 

 
.child-2 
 
{ 
 
    position: inherit; 
 
    z-index: 6; 
 
    top: 10px; 
 
    left: 30px; 
 
    background: blue; 
 
    height: 60px; 
 
}

<div class="parent"> 
 
    header background repeated image 
 
    <div class="child-2"> 
 
     logo 
 
    </div> 
 
</div> 
 

 
<div class="child"> 
 
    hero image 
 
</div>

Answer 1

당신은 그냥 로고에게주고 다른 블록 에 z-index을 제공 할 필요가 없습니다 그것은 잘 될 것입니다.

div { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: #0f0; 
 
} 
 

 
.parent { 
 
    position: relative; 
 
} 
 

 
.child { 
 
    position: fixed; 
 
    top: 70px; 
 
    left: 30px; 
 
    background: #f00; 
 
    height: 60px; 
 
} 
 

 
.child-2 { 
 
    position: inherit; 
 
    z-index: 16; 
 
    top: 10px; 
 
    left: 30px; 
 
    background: blue; 
 
    height: 60px; 
 
}

<div class="parent"> 
 
    header background repeated image 
 
    <div class="child-2"> 
 
    logo 
 
    </div> 
 
</div> 
 

 
<div class="child"> 
 
    hero image 
 
</div>