HTML，CSS:color不起作用

Question

我正在建立一个网站，但由于某种原因，我的color: white无法工作。

不起作用的代码：

.main-navbar-heading-2 {
    position: absolute;
    top: 5px;
    left: 5px;
    text-decoration: none;
    color: white !important;
    font-family: Raleway;
    font-size: 1.3em;
}

我的小提琴：https://jsfiddle.net/5rpy02er/

Answer 1

您的文本位于另一层后面。Put z-index：

  z-index: 10;

看到它工作：

https://jsfiddle.net/5rpy02er/1/

PS：这个颜色很好用。

Answer 2

颜色工作正常问题是您的z索引

.main-navbar-heading-2 {
        position: absolute;
        top: 5px;
        left: 5px;
        text-decoration: none;
        color: white !important;
        font-family: Raleway;
        font-size: 1.3em;
        z-index:9;
    }

这是最新的小提琴：https://jsfiddle.net/5rpy02er/2/

Answer 3

只需将z索引添加到main-namevbar-heading-2即可。

z-index:10;

Answer 4

为了更精确，您不需要在color上设置!important属性，它可以正常工作。

就像上面所说的，您必须添加z-index属性，因为内容位于absolute位置并且位于第一位置。默认情况下，它的值设置为1，第二个元素的值为2。

这就是为什么您必须放置一个高于或等于2的值，以使其出现在width上占用100%的另一个值之前。

请参阅SO上的这篇非常好的帖子，以了解z-index属性的更多用法：Z索引相对还是绝对？