HTML, CSS: Farbe funktioniert nicht

Question

Ich baue eine Website, aber aus irgendeinem Grund funktioniert meine color: white nicht.

Der Code, der nicht funktioniert:

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

Meine Geige: https://jsfiddle.net/5rpy02er/

Answer 1

Ihr Text hinter der anderen Schicht ist. Setzen Sie z-index:

z-index: 10; 

anzeigen Arbeits:

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

PS: Die Farbe funktioniert perfekt.

Answer 2

Farbe adaequat Problem mit Ihrem z-index

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

Hier wird die aktualisierte Geige: https://jsfiddle.net/5rpy02er/2/

Answer 3

Gerade z-index, um es Haupt-navbar-Überschrift-2 hinzuzufügen.

z-index:10; 

Answer 4

Nur eine weitere Präzision, brauchen Sie nicht !important Eigenschaft auf color zu setzen, es funktioniert gut.

Wie oben erwähnt, müssen Sie z-index Eigenschaft hinzufügen, da der Inhalt in absolute Position und an erster Stelle ist. Standardmäßig ist der Wert auf 1 festgelegt und das zweite Element hat den Wert 2.

Deshalb müssen Sie einen Wert höher oder gleich 2 setzen, damit er vor dem anderen erscheint, der 100% auf dem width belegt.

diesen sehr guten Beitrag anzeigen auf SO mehr die Verwendung der z-index Eigenschaft verstehen: Z-Index Relative or Absolute?