背景颜色的一半，而不是

Question

所以我在我的div上有一些涉及面具的大纲。但由于某种原因，一半的轮廓在背景颜色后面，而另一半则没有（通过点击第二行看）。

小提琴：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 {
    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;中看到掩码下的红线mask。 如果是，z-index:100;中的focus。