前のDOM要素の後ろ

Question

なぜ私の<div class="text">{{ diff }}</div>が見えないのですか？それは私のコンポーネントの背後にあり、z-indexは役に立ちません。

<div class="chart"> 
    <div class="spent" :style="{ flex: flexSpent }"></div> 
    <div class="remaining" :style="{ flex: flexRemaining }"></div> 
</div> 
<div class="text">{{ diff }}</div> 

のdiv .textはdivの.chartの後ろに、私が間違って何をやっているのですか？

Demo

Answer 1

z-indexを使用できるようにするには、absoluteまたはrelativeにpositionを設定する必要があります。

あなた.textは以下の通りであるべきためのCSS：すべての

.text { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     height: 100%; 
     position:relative; 
}