CODEWITHSUNDEEP
htmlcss
Aubin
Aubin

Reputation: 14853

Why the text isn't white?

Here is the source:

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

And the result, as displayed by Firefox or Chrome

White becomes lightblue

The question is: Why white text becomes lightblue?

Note: I have added some z-index CSS directives without any effect.

Upvotes: 1

Views: 86

Answers (4)

juliet
juliet

Reputation: 29

try : 

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

Upvotes: -1

aghidini
aghidini

Reputation: 3010

The z-index property applies only to positioned elements (see docs). Probably your images/quadrant-bg.svg image is partially transparent and is displayed on top of the text.

Add position: relative to the .quadrant-legend-text selector and you should be fine.

Upvotes: 5

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

.quadrant-legend-img and .quadrant-legend-btn are position:absolute, but .quadrant-legend-text has no position attribute. This means that the z-index on that .quadrant-legend-text will not apply, making the text appear behind the .quadrant-legend-img, which is your images/quadrant-bg.svg, which I assume is a semi-transparent blue rectangle?

You shouldn't be using so much position:absolute for your basic layout features - consider using float: right for the .quadrant-legend-btn and removing the .quadrant-legend-img in favour of a background-image on .quadrant-legend-asset.

Upvotes: 1

dippas
dippas

Reputation: 60553

Most likely it is a specificity issue, so try adding the parent to the rule.

plus z-index will only work in positioned elements, but I'm pretty sure you won't need that here in this specific case

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

Upvotes: 1

Related Questions