z-index 有问题吗？文本未显示在具有背景颜色的元素前面

Question

我正在尝试使用 CSS 制作一个简单的 "progress bar" 类型元素。出于某种原因，尽管设置了 z-index，但 .label 元素中的文本并未显示在栏的前面。如何使文本可见？

#tech-entries {
  width: 200px;
padding: 5px;
}
.tech-entry {
  position: relative;
  padding-bottom: 2px;
}
.tech-entry .label {
  text-align: left;
  padding-left: 2px;
  z-index: 5;
  height: 15px;
}
.tech-entry .barbg,
.tech-entry .bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 15px;
}
.tech-entry .barbg {
  background-color: white !important;
  width: 100%;
}
.tech-entry .bar {
  background-color: green !important;
  z-index: 4;
}

<div id="tech-entries">
  <div class="tech-entry">
    <div class="label">test1</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 99%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test2</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 65%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test3</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 88%;"></div>
  </div>
</div>

Answer 1

您必须将 position: absolute; 应用到 .label，否则 z-index 将没有任何效果。

评论后添加：

将标签中的 height: 15px 也应用到父元素。如果所有子元素都绝对定位，则父元素需要一个定义的高度，否则它的高度将为 0，因为没有静态或相对内容。

#tech-entries {
  width: 200px;
  padding: 5px;
  background-color: gray !important;
}

.tech-entry {
  position: relative;
  padding-bottom: 2px;
  height: 15px;
}

.tech-entry .label {
  position: absolute;
  padding-left: 2px;
  z-index: 5;
  color: white !important;
  height: 15px;
}

.tech-entry .barbg,
.tech-entry .bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 15px;
}
.tech-entry .barbg {
  background-color: white !important;
  width: 100%;
}
.tech-entry .bar {
  background-color: green !important;
  z-index: 4;
}

<div id="tech-entries">
  <div class="tech-entry">
    <div class="label">test1</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 99%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test2</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 65%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test3</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 88%;"></div>
  </div>
</div>

Answer 2

将position:relative;添加到.label

#tech-entries {
  width: 200px;
}
.tech-entry {
  position: relative;
  padding-bottom: 2px;
}
.tech-entry .label {
  text-align: left;
  padding-left: 2px;
  z-index: 5;
  height: 15px;
  position:relative;
  color: white !important;
}
.tech-entry .barbg,
.tech-entry .bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 15px;
}
.tech-entry .barbg {
  background-color: gray !important;
  width: 100%;
}
.tech-entry .bar {
  background-color: green !important;
  z-index: 4;
}

<div id="tech-entries">
  <div class="tech-entry">
    <div class="label">test1</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 99%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test2</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 65%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test3</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 88%;"></div>
  </div>
</div>

Answer 3

z-index 只应用顶部定位的元素，所以你想绝对定位你的栏 class 而标签相对。

#tech-entries {
  width: 200px;
}

.tech-entry {
  position: relative;
  padding-bottom: 2px;
}

.tech-entry .label {
  text-align: left;
  padding-left: 2px;
  z-index: 5;
  height: 15px;
  color: white !important;
  position: relative;
}

.tech-entry .barbg,
.tech-entry .bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 15px;
}

.tech-entry .barbg {
  background-color: gray !important;
  width: 100%;
}

.tech-entry .bar {
  background-color: green !important;
  z-index: 4;
  position: absolute;
}

<div id="tech-entries">
  <div class="tech-entry">
    <div class="label">test1</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 99%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test2</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 65%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test3</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 88%;"></div>
  </div>
</div>

Answer 4

您可以将 position: relative 添加到您的 .label class 以获得 z-index 的效果。

#tech-entries {
  width: 200px;
}
.tech-entry {
  position: relative;
  padding-bottom: 2px;
}
.tech-entry .label {
  text-align: left;
  padding-left: 2px;
  z-index: 5;
  height: 15px;
  color: white !important;
  position: relative;
}
.tech-entry .barbg,
.tech-entry .bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 15px;
}
.tech-entry .barbg {
  background-color: gray !important;
  width: 100%;
}
.tech-entry .bar {
  background-color: green !important;
  z-index: 4;
}

<div id="tech-entries">
  <div class="tech-entry">
    <div class="label">test1</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 99%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test2</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 65%;"></div>
  </div>
  <div class="tech-entry">
    <div class="label">test3</div>
    <div class="barbg"></div>
    <div class="bar" style="width: 88%;"></div>
  </div>
</div>

z-index 有问题吗？文本未显示在具有背景颜色的元素前面

Problems with z-index? Text not showing in front of elements with background-color

css

z-index

css-position