background: inherit; = "transparent" zum Elternelement?

[Rolf B]

Hallo michaah,

ein Onlinebeispiel des Problems bei Codepen, jsFiddle oder Konsorten wäre nett gewesen. Dann wüsste man, ob Du nicht vielleicht irgendwas anderes verbastelt hast.

Ich kann daher nur abstrakte Erklärungen schreiben:

Es ist für jede CSS Eigenschaft festgelegt, ob sie per Default vererbt wird oder nicht. Font-Einstellungen werden beispielsweise vererbt, Hintergründe oder Ränder nicht. Der Inherit-Wert ist dafür da, um bei nicht vererbten Eigenschaften die Vererbung zu erzwingen. Oder, wenn eine andere CSS Regel einen Wert setzt, diesen Wert außer Kraft zu setzen und auf Vererbung zurückzufallen.

Aber da gibt's Fallstricke.

Gucken wir uns dieses HTML an:

<section>
   <article>
      <h1>Hello World</h1>
   </article>
</section>

mit CSS

section {
   background-color: red;
}
h1 {
   background-color: inherit;
}

Das macht den Hintergrund von h1 nicht rot. Hintergründe werden per Default nicht vererbt, deswegen gilt für article der Defaultwert background-color: transparent;. Und das wird an h1 vererbt.

Liegt so ein Szenario bei Dir ggf. vor? Bevor Du fragst: was nicht geht, ist eine Sprungvererbung (Großvater enterbt den Sohn und vererbt alles dem Enkel). Wenn Du - wieder im Beispiel oben - der section und der h1 die Hintergrundfarbe rot geben willst, article aber transparent bleiben soll, musst Du die Hintergrundfarbe für section und h1 setzen. Entweder durch eine Aufzählung von Selektoren, oder - um red nur an einer Stelle zu haben, mit einem custom property.

/* Mit Aufzählung */
section, h1 {
   background-color: red; 
}
/* oder */
section {
   --section-background: red;
   background-color: var(--section-background);
}
h1 {
   background-color: var(--section-background);
}

Normalerweise würde man die Aufzählung nehmen. Wenn Du aber mehrere Sections hast und jede eine eigene Hintergrundfarbe, dann kann die Idee mit dem custom property nützlich sein (aber dann nicht mit h1, davon soll's ja nur eine auf der Seite geben).

Zum z-index ist zu sagen, dass diese Eigenschaft nur auf Elemente wirkt, die einen Stapelkontext erzeugen. Der z-index gilt nämlich nicht für das Element, sondern für den von ihm erzeugten Stapelkontext. Es gibt eine ganze Menge von Eigenschaften, die das bewirken, die sind bspw. bei Mozilla aufgelistet. Wenn z-index bei Dir nicht zu wirken scheint, kann das auch daran liegen.

Ich glaube, ich hatte mal ein I gekauft, um das im Selfwiki zu tun; vielleicht müsste ich mir auch mal eine Todo Liste machen, so wie Matthias, damit nicht alles automatisch auf der Was Solls Liste landet.

Rolf