固定ポジションのZ-インデックス

Question

私のクラスは常にページの前に置いてもらいたいが、動かない。

解決策を見つけるのを手伝ってください。クラス右のdivは、テストの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-indexが動作しません。あなたがクラスdivをテスト部門から取り除くと、それはうまくいくでしょう。