고정 된 위치의 Z- 인덱스

Question

항상 수업의 앞쪽에 수업을 갖기를 원하지만 작동하지 않습니다.

해결 방법을 찾도록 도와주세요. 클래스 바로 DIV 테스트 사업부의 내부에 있기 때문에

.test { 
 
    border-radius: 5px 0px 0px 5px; 
 
    height: 150px; 
 
    width: 40px; 
 
    top: 50% !important; 
 
    right: 0 !important; 
 
    float: right; 
 
    position: fixed !important; 
 
    transition: width 0.5s; 
 
    -webkit-transition: width 0.5s; 
 
    text-align: left; 
 
    overflow: hidden; 
 
    z-index: 1000; 
 
} 
 

 
.test .right { 
 
    float: right; 
 
    background: #4A90E2; 
 
    width: 30px; 
 
    height: 100%; 
 
    position: relative; 
 
    z-index: 10; 
 
    text-align: middle; 
 
    padding-top: 50px; 
 
    padding-bottom: 50px; 
 
    white-space: nowrap; 
 
} 
 

 
.test .left { 
 
    position: absolute; 
 
    left: 0; 
 
    margin-left: 20px; 
 
    float: left; 
 
}

<div class="test" style="background-color: #4A90E2;"> 
 
    <div class="right"> 
 
    <h6 style="transform:rotate(-90deg); color: white; margin-top:50px; margin-right:10px"> 
 
     <i style="color:white; " class="fa fa-phone fa-1x" aria-hidden="true"></i>&nbsp;&nbsp; Service 
 
    </h6> 
 
    </div> 
 
    <div style="color:white;" class="left"> 
 
    <h3 style="color:white !important;"> Text</h3> 
 
    <p style="margin-top:-20px;">sometext </p> 
 
    </div> 
 
</div>=

Answer 1

Z-지수는 작동하지 않습니다. 만약 당신이 테스트 div에서 클래스 바로 div를 가져 가면 성공할 것입니다.