轮廓线一半落后于背景色一半不

Question

So I have some outlines on my divs which involves a mask. but for some reason half the outline is behind the background-color, while other half isn't (see by clicking the second row).

fiddle: https://jsfiddle.net/p08bc2bj/

HTML (ignore the vue stuff):

<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 {
    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

If you want to see red line under mask, z-index:100; in mask . If else, z-index:100; in focus .