前一个后面的 DOM 元素答案

【问题标题】：DOM element behind previous one前一个后面的 DOM 元素
【发布时间】：2017-07-06 13:59:32
【问题描述】：

我不明白为什么我的<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

【问题讨论】：

首先，请阅读How to Ask - 所有相关代码都直接属于您的问题。
其次，这是 CSS 101：z-index 仅适用于定位元素。所以添加position:relative，z-index 就可以正常工作了。
codepen 与您在问题中提供的代码非常不同。

标签： html css sass

【解决方案1】：

为了能够使用z-index，您必须将position 设置为absolute 或relative。

.text 的 CSS 应如下所示：

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

【讨论】：