アウトライン半分背景色半分なし

Question

私はマスクを含む私のdivsのいくつかのアウトラインを持っています。何らかの理由でアウトラインの半分が背景色の背後にあり、残りの半分は背景色ではありません（2行目をクリックしてください）。

フィドル：https://jsfiddle.net/p08bc2bj/

HTML（VUEのものを無視する）：

<div class='wrapper'> 
    <div v-for="(card, index) in deck" class="row" @click="cardClicked(card)" tabindex="0"> 
     <div class="mana key"> 
      1 
     </div> 
     <div class="coin key"> 
      1 
     </div> 
     <div class="name"> 
      test 
     </div> 
     <div class="count"> 
      1 
     </div> 
     <div class=mask></div> 
    </div> 
    <div v-for="(card, index) in deck" class="row" @click="cardClicked(card)" tabindex="0"> 
     <div class="mana key"> 
      1 
     </div> 
     <div class="coin key"> 
      1 
     </div> 
     <div class="name"> 
      test 
     </div> 
     <div class="count"> 
      1 
     </div> 
     <div class=mask></div> 
    </div> 
    <div v-for="(card, index) in deck" class="row" @click="cardClicked(card)" tabindex="0"> 
     <div class="mana key"> 
      1 
     </div> 
     <div class="coin key"> 
      1 
     </div> 
     <div class="name"> 
      test 
     </div> 
     <div class="count"> 
      1 
     </div> 
     <div class=mask></div> 
    </div>  
    <div v-for="(card, index) in deck" class="row" @click="cardClicked(card)" tabindex="0"> 
     <div class="mana key"> 
      1 
     </div> 
     <div class="coin key"> 
      1 
     </div> 
     <div class="name"> 
      test 
     </div> 
     <div class="count"> 
      1 
     </div> 
    </div>  
    <div v-for="(card, index) in deck" class="row" @click="cardClicked(card)" tabindex="0"> 
     <div class="mana key"> 
      2 
     </div> 
     <div class="coin key"> 
      2 
     </div> 
     <div class="name"> 
      test 
     </div> 
     <div class="count"> 
      2 
     </div> 
    </div>   
</div> 

CSS：maskで

.mask { 
    background-color: rgba(0,0,0,0.6); 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

.row { 
    box-sizing: border-box; 
    cursor: pointer; 
    display: flex; 
    position: relative; 

    &:focus { 
     outline: red solid thick; 
    } 

    .name { 
     flex: 1; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     word-break: keep-all; 
     white-space: nowrap; 
    } 
    .key { 
     display: inline-block; 
     position: relative; 
     text-align: center; 
     width: 1.5em; 
     &.coin { 
      background-color: yellow; 
     } 
     &.mana { 
      background-color: lightblue; 
     } 
    } 

    &.used { 
     background-color: rgba(0, 0, 0, 0.3); 
    } 
} 

.wrapper { 
    max-height: 100vh; 
    overflow: auto; 
} 

Answer 1

あなたがマスクの下に赤い線を表示したい場合は、z-index:100;。 他の場合、z-index:100;はです。