background: inherit; = "transparent" zum Elternelement?

[michaah]

Hi,

im konkreten Fall ist der HG des html HG's mit background-color: <farbe>; definiert. Wo gewünscht erben nachfolgende Elemente dieses Farbsetting für den HG.

Wie ich nun eben feststelle macht es für den z-index eines Elements aber einen Unterschied ob ich den background eines Elements explizit definiere oder dieser gleiche Wert vererbt wird:

Beide male nimmt der HG die gewünschte Farbe an, aber im ersten Fall (explizit) kommt der gewünschte z-index zum Tragen, d.h. bestimmte Inhalte werden von HG des Elements überdeckt. Im zweiten Fall scheint "inherit" einfach durch Transparenz umgesetzt zu werden mit dem unerwünschten Nebeneffekt, dass nun eben Inhalte sichtbar sind, die eigentlich durch den HG des Elements abgedeckt werden sollten. Dafür hat man ja eigentlich "transparent".

Ist dies tatsächlich die gewünschte Wirkung von "inherit"? Oder läßt sich dies irgenwie beeinflussen? Ist das ggf. als (Browser-) Bug zu werten? Ich meine bei gesetztem z-index macht diese Implementierung von "inherit" keinen Sinn.

[Gunnar Bittersmann]

@@michaah

[…] Ich meine bei gesetztem z-index macht diese Implementierung von "inherit" keinen Sinn.

Ich meine, ohne anschauliches Beispiel macht deine Frage keinen Sinn.

😷 LLAP

[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

[michaah]

Ok, habe es kapiert:

Die Ursache war tatsächlich, dass die Vererbungskette unterbrochen war.

Und ich hatte das nicht bemerkt, weil das verbergende Element eine svg-Grafik ist, welche jedoch einen transparenten HG hat. Was ich zunächst als tatsächliche Vererbung wahrgenommen hatte war einfach das Durchscheinen des html-HGs. Vorher war der HG des Elements explizit auf "white" gesetzt, dann klappt das natürlich mit dem z-index.

Das Beispiel welches ich gebastelt hatte ist damit überflüssig, ich poste es dennoch für wen auch immer es interessiert. Dort unterbricht die fehlende Definition des HG im body Element die Vererbungskette zum html-Element.

Weil wir aber gerade beim Thema sind: Bei einem anderen Element, bei welchem mir klar war dass die Verschachtelung die Vererbung verhindert, habe ich nach einer Möglichkeit gesucht den für das html-Element gesetzten HG für das betreffende Element automatisch zu übernehmen.

"attr" sieht ja so aus als soll es das zukünftig vielleicht mal können, aber gegenwärtig gibt es da (ausser vmtl. JS) nichts in CSS was dies ermöglichen würde?

Danke für's mitdenken

Gruß

M

[Gunnar Bittersmann]

@@michaah

[…] habe ich nach einer Möglichkeit gesucht den für das html-Element gesetzten HG für das betreffende Element automatisch zu übernehmen […] aber gegenwärtig gibt es da (ausser vmtl. JS) nichts in CSS was dies ermöglichen würde?

Die Frage hat Rolf bereits beantwortet, bevor du sie gestellt hast.

Danke für's mitdenken

Solch einen Dank würde ich dir auch gerne mal aussprechen können.

😷 LLAP

[michaah]

Die Frage hat Rolf bereits beantwortet, bevor du sie gestellt hast.

Stimmt, da war ich gedanklich woanders.

Danke für's mitdenken

Solch einen Dank würde ich dir auch gerne mal aussprechen können.

Ich höre die Zukunftsmusik in weiter Ferne vor sich hin düdeln ...