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

【问题标题】：Problems with z-index? Text not showing in front of elements with background-colorz-index 有问题吗？文本未显示在具有背景色的元素前面
【发布时间】：2022-01-25 21:23:04
【问题描述】：

我正在尝试使用 CSS 制作一个简单的“进度条”类型元素。出于某种原因，尽管设置了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>

【问题讨论】：

标签： css css-position z-index

【解决方案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>

【讨论】：

如您所料，这完全破坏了布局。如何在不创建“占位符” div 或类似的无关元素的情况下修复它？
@ScottBeeson position: relative 怎么样？
查看我的答案的补充/sn-p

【解决方案2】：

z-index 仅适用于顶部定位的元素，因此您希望绝对定位 bar 类和相对定位标签。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以将position: relative 添加到您的.label 类中以获得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>

【讨论】：