Question

以下是来源：

<!doctype html>
<html>
<head>
   <meta charset="UTF-8" />
   <title>White</title>
   <style>
body {
   background-color: black;
}
.quadrant-legend {
    position: absolute;
    left    :  28px;
    width   : 288px;
    height  :  62px;
}
.quadrant-legend-img {
    position: absolute;
    top     : 0;
    left    : 0;
    z-index : 3;
}
.quadrant-legend-btn {
    position: absolute;
    top     :  6px;
    right   : 34px;
    z-index : 3;
}
.quadrant-legend-text {
    margin-left: 16px;
    margin-top : 16px;
    font-family: arial, sans-serif;
    font-size  : 26px;
    color      : white;
    z-index    : 4;
}
#quadrant-legend-asset {
    top: 60px;
    z-index: 4;
}
   </style>
</head>
<body>
   <div id="quadrant-legend-asset" class="quadrant-legend">
      <img class="quadrant-legend-img" src="images/quadrant-bg.svg" />
      <img class="quadrant-legend-btn" src="images/quadrant-asset-btn.svg" />
      <p class="quadrant-legend-text">lightblue text</p>
   </div>
   <p class="quadrant-legend-text">white text</p>
</body>
</html>

结果，如Firefox或Chrome所示

问题是：为什么白色文字变成浅蓝色？

注意：我添加了一些z-index CSS指令而没有任何影响。

Answer 1

z-index属性仅适用于定位的元素（请参阅docs）。可能您的images/quadrant-bg.svg图片部分透明，并显示在文字的顶部。

将position: relative添加到.quadrant-legend-text选择器，您应该没问题。

Answer 2

最有可能是特异性问题，因此请尝试将父级添加到规则中。

加z-index只会在position ed元素中工作，但我非常确定您在此特定情况下不会需要< / p>

＆＃13;

body {
  background-color: black;
}
.quadrant-legend {
  position: absolute;
  left: 28px;
  width: 288px;
  height: 62px;
}
.quadrant-legend-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.quadrant-legend-btn {
  position: absolute;
  top: 6px;
  right: 34px;
  z-index: 3;
}
#quadrant-legend-asset .quadrant-legend-text {
  margin-left: 16px;
  margin-top: 16px;
  font-family: arial, sans-serif;
  font-size: 26px;
  color: white;
  z-index: 4;
  position: absolute
}
#quadrant-legend-asset {
  top: 60px;
  z-index: 4;
  position: relative
}

＆＃13;

<div id="quadrant-legend-asset" class="quadrant-legend">
  <img class="quadrant-legend-img" src="images/quadrant-bg.svg" />
  <img class="quadrant-legend-btn" src="images/quadrant-asset-btn.svg" />
  <p class="quadrant-legend-text">lightblue text</p>
</div>
<p class="quadrant-legend-text">white text</p>

＆＃13;

Answer 3

.quadrant-legend-img和.quadrant-legend-btn为position:absolute，但.quadrant-legend-text没有position属性。这意味着该z-index上的.quadrant-legend-text将不适用，使文字显示在.quadrant-legend-img后面，即images/quadrant-bg.svg，我认为这是一个半透明的蓝色矩形？

您不应该使用这么多position:absolute作为基本布局功能 - 考虑将float: right用于.quadrant-legend-btn并删除.quadrant-legend-img以支持background-image上的.quadrant-legend-asset。

Answer 4

尝试：

.quadrant-legend-text p {
    color : #fff;
}

为什么文字不是白色的？

4 个答案: