Question

我尝试使用CSS制作一个简单的进度条＆＃34;类型元素。出于某种原因，尽管设置了.label，但z-index元素中的文字未显示在条形图的前面。如何使文字可见？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您必须将position: absolute;应用于.label，否则z-index将无效。

评论后的补充：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

{{1}}

Answer 3

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;
  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类以获得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的问题？文本没有显示在背景颜色的元素前面

4 个答案: