Keine Wirkung von z-index auf ul/li

[j4nk3y]

Salve!

Eine kurze Frage zum Z-Index. Ich bastel gerade an einer Navigation und wollte die Elemente die unter den ersten <li> Elementen liegen unter selbigen verstecken.
Etwa wie <ul><li style="z-index:2"><ul style="z-index:1"><li></li></ul></li></ul>.

Aber es möchte nicht so funktionieren wie ich das geplant hatte. Habe natürlich auch ein kleines Beispiel vorbereitet, hier sollten die rot umrandeten <li> nicht sichtbar sein, da deren z-index geringer ist als die des übergeordneten Elementes.

Ich verstehe nicht genau, warum das bei li bzw ul Elementen nicht funktioniert?

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Ich verstehe nicht genau, warum das bei li bzw ul Elementen nicht funktioniert?

z-index wird nur angewendet, wenn der Wert der Eigenschaft position ungleich static ist.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

z-index wird nur angewendet, wenn der Wert der Eigenschaft position ungleich static ist.

Was im verlinkten Codepen der Fall ist.

LLAP 🖖

[j4nk3y]

Hey,

Ich verstehe nicht genau, warum das bei li bzw ul Elementen nicht funktioniert?

z-index wird nur angewendet, wenn der Wert der Eigenschaft position ungleich static ist.

Ja oder diese flex-items sind, den Satz hab ich in der Wiki gelesen. Beides trifft zu aber angezeigt werden die Elemente mit geringerem Z-index trotzdem.

Hab gerade gelesen, dass das ein Chrome Problem sein könnte, ich teste gerade im FF.

Gruß
Jo

[Gunnar Bittersmann]

@@j4nk3y

Eine kurze Frage zum Z-Index. Ich bastel gerade an einer Navigation und wollte die Elemente die unter den ersten <li> Elementen liegen unter selbigen verstecken.
Etwa wie <ul><li style="z-index:2"><ul style="z-index:1"><li></li></ul></li></ul>.

Durch den z-Index haben die li-Elemente ihren jeweils eigenen Stapelkontext; etwaige z-Indizes von deren Nachfahren beziehen sich auf diesen, nicht auf einen vorigen (den globalen) Stapelkontext.

Deshalb sind die ul-Elemente nicht hinter den li-Elementen, sondern davor.

Das SELFHTML-Wiki gibt diesbezüglich nichts her; da musst du in verlässlicheren Quellen kucken, bspw. im MDN. Auf die Schnelle habe ich auch das hier gefunden.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Durch den z-Index haben die li-Elemente ihren jeweils eigenen Stapelkontext; etwaige z-Indizes von deren Nachfahren beziehen sich auf diesen, nicht auf einen vorigen (den globalen) Stapelkontext.

Das SELFHTML-Wiki gibt diesbezüglich nichts her; da musst du in verlässlicheren Quellen kucken,

nicht?

Bis demnächst
Matthias

[j4nk3y]

Hallo Matthias,

Durch den z-Index haben die li-Elemente ihren jeweils eigenen Stapelkontext; etwaige z-Indizes von deren Nachfahren beziehen sich auf diesen, nicht auf einen vorigen (den globalen) Stapelkontext.

Das SELFHTML-Wiki gibt diesbezüglich nichts her; da musst du in verlässlicheren Quellen kucken,

nicht?

Ah, das mit dem eigenen Stapelkontext wusste ich nicht, dann macht das Sinn.

Gruß
Jo

[j4nk3y]

Salve!

Etwa wie <ul><li style="z-index:2"><ul style="z-index:1"><li></li></ul></li></ul>.

Habe gerade noch ein wenig das Beispiel bearbeitet (Elemente getauscht section/article/p) dadurch kann ich schonmal ausschließen das es an ul / li Elementen liegt.
Ich hab Kopfschmerzen/Ich mag CSS nicht. (Erfordert keinen Kommentar, muss nur grad meinem Unmut Luft machen grins)

Gruß
Jo

[MrMurphy1]

Hallo

Es ist schwierig dir zu helfen wenn nicht mal klar wird was du im Endeffekt erreichen möchtest.

Dein Ursprungsbeitrag ist so unstrukturiert wie deine CSS-Anweisungen.

Wahrscheinlich fehlt dir auch das grundsätzliche Verständnis, wie sich position und z-index überhaupt auswirken.

Wenn solche Probleme auftreten erstelle ich erst einmal eine Testdatei, aus der das Verhalten der einzelnen CSS-Anweisungen sichtbar nachzuvollziehen ist und füge dann die gewünschten CSS-Anweisungen nacheinander hinzu.

Vorher werden alle nicht notwendigen CSS-Anweisungen entfernt.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@j4nk3y

Habe gerade noch ein wenig das Beispiel bearbeitet (Elemente getauscht section/article/p) dadurch kann ich schonmal ausschließen das es an ul / li Elementen liegt.

Natürlich liegt es nicht daran. Elementtypen sind CSS völlig egal. Elementtypen haben im Browserstylesheet gewisse Defaulteinstellungen, die aber vom Seitenautor überschrieben werden können. (Und vom Nutzer auch.)

Du willst nicht wahrhaben, dass es am Stapelkontext liegt?

LLAP 🖖

[j4nk3y]

Hey,

Du willst nicht wahrhaben, dass es am Stapelkontext liegt?

Ich hab keine Ahnung... Die Navigation fügt sich eins A unter dem daneben liegenden Section unter...

Mir jetzt auch egal... ich mach jetzt Feierabend.

Gruß
Jo

[MrMurphy1]

Hallo

Ich versuche mal dir eine Lösung anzubieten.

Ich habe dein Problem so verstanden:

Die inneren ul-Elemente sollen nicht sichtbar sein. Dabei sollen sie aber weder komplett ausgeblendet werden noch außerhalb des Browserfensteres verschoben werden. Sondern (vom Betrachter aus) hinter den sie umschließenden li-Elementen liegen. Sobald diese umschließenden li-Elemente gehovert werden, sollen die inneren ul-Elemente wie Schmidts Katze erschreckt nach rechts springen und damit sichtbar werden.

Mal abgesehen von den beim Hovern üblichen Problemen mit Touchscreen-Bildschirmen biete ich mal folgende Lösung an:

Da es technisch nicht möglich ist, die umschließenden li-Elemente vor die inneren ul-Elemente zu heben, müssen die inneren ul-Elemente mit einem negativen z-index hinter die umschließenden li-Elemente gedrückt werden.

Zu dem HTML

   <nav>
      <ul>
         <li>
            <button>test1</button>
            <ul>
               <li>test1a</li>
               <li>test1b</li>
            </ul>
         </li>
         <li>
            <button>test2</button>
            <ul>
               <li>test2a</li>
               <li>test2b</li>
            </ul>
         </li>
         <li>
            <button>test3</button>
            <ul>
               <li>test3a</li>
               <li>test3b</li>
            </ul>
         </li>
      </ul>
   </nav>

passt dann das CSS

      li {
         list-style-type: none;
      }
      nav > ul > li {
         background-color: black;
         color: white;
         width: 12rem;
         height: 2rem;
         padding: 0.5rem;
         border: 1px solid blue;
         display: flex;
      }
      nav > ul > li > ul {
         position: relative;
         left: -2rem;
         display: flex;
      }
      nav > ul > li:nth-child(-1n+2) > ul {
         z-index: -1;
      }
      nav > ul > li > ul > li {
         position: relative;
         top: 0em;
         left: 0em;
         display: inline-block;
         border: 1px solid red;
      }
      nav > ul > li:hover ul > li {
         background-color: darkblue;
         left: 10rem;
      }

Zur Kontrolle habe ich dem dritten inneren ul-Element keinen z-index mit auf den Weg gegeben, so dass seine Position sichtbar bleibt. Das ist natürlich auch sichbar, wenn die schwarze Hintergrundfarbe der umschließenden li-Elementen entfernt wird, zum Beispiel in den jeweiligen Browser-Entwicklertools.

Gruss

MrMurphy

[j4nk3y]

Hallo MrMurphy,

Ja das macht Sinn mit dem Stapelkontext. Schön, dass das schon mal im Pen funktioniert aber bei mir noch nicht. Muss grad noch ein wenig an der Ursache forschen.

Ich danke dir!

Gruß
Jo

[j4nk3y]

Servus zusammen!

Ein Satz vorweg: Boah... CSS ist so *! Nicht ernst nehmen, ich wollte es einfach nur einmal gesagt haben.

Da ich das mit dem Stapelkontext mittlerweile verstanden hab, und die große Schwäche von CSS mir immer wieder ein strich durch die Rechnung macht.

Folgendes Szenario. Es gibt eine Navigation der folgenden Art:

<nav>
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li></li>
            ....
            <li></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul>
            <li></li>
            ....
            <li></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul>
            <li></li>
            ....
            <li></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Folgendes nicht lösbares Problem (rein mit CSS).

Da der innere Stapelkontext nicht vom äußeren abhängt, lassen sich innere Elemente hinter einander verstecken. Zum Beispiel, alle Listitems in der obersten Unorderedlist oder alle Listitems in der mittleren/tiefsten Unorderedlist. Letzteres nur, wenn das übergeordnete Listitem keinen z-index besitzt. Was natürlich nicht schlimm wär wenn man nur 2 ebenen hat. Also lassen sich die ersten Listitems nicht unter den 'tieferen' (bezogen auf die Markup struktur) liegenden Listitems verstecken.

Ich sage ja gar nicht das der Stapelkontext schlecht ist. Aber das dieser gar nicht mehr funktioniert wenn das Eltern Element schon ein z-index hat, ist schlichtweg schwach.

Weiterhin gibt es natürlich auch kein Selector um Parents Siblings bei hover/focus/sonstiges anzusprechen, was auch ein ausblenden übergeordneter Elemente, rein per CSS, nicht Möglich macht.

Naja... Ich bleibe dabei... CSS ist einfach fürn *. Also versuch ich das jetzt 'umständlich' (weil es einfacher gehen könnte) mit jQuery zu realisieren.

Startschuß! (übersehe ich etwa etwas?)

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Da ich das mit dem Stapelkontext mittlerweile verstanden hab, und die große Schwäche von CSS mir immer wieder ein strich durch die Rechnung macht.

Also lassen sich die ersten Listitems nicht unter den 'tieferen' (bezogen auf die Markup struktur) liegenden Listitems verstecken.

Weiterhin gibt es natürlich auch kein Selector um Parents Siblings bei hover/focus/sonstiges anzusprechen, was auch ein ausblenden übergeordneter Elemente, rein per CSS, nicht Möglich macht.

Naja... Ich bleibe dabei... CSS ist einfach fürn *.

Möglicherweise ist ja auch den HTML fürn *. Wenn es notwendig ist, ein übergeordnetes Listenelement dann auszublenden, wenn eines seiner Kinder ausgewählt ist, ist vielleicht das übergeordnete Listenelement nicht wirklich übergeordnet.

EDIT und zum Ausblenden von Elementen gibt es auch andere Möglichkeiten als z-index.

Bis demnächst
Matthias

[j4nk3y]

Hallo Matthias,

Möglicherweise ist ja auch den HTML fürn *.

Mit den HTML komme ich eigentlich ganz gut klar ;).

Wenn es notwendig ist, ein übergeordnetes Listenelement dann auszublenden, wenn eines seiner Kinder ausgewählt ist, ist vielleicht das übergeordnete Listenelement nicht wirklich übergeordnet.

Doch denke schon. Nur wenn dieses Listenelement Optisch auf der Seite unter dem Listenelement (y-Achse) positioniert ist und das untergeordnete Listenelement unter (z-Achse) dem übergeordneten liegt man aber das untergeordnete sehen/auswählen möchte, dann ist der Stapelkontext, so wie er existiert, schlecht.

EDIT und zum Ausblenden von Elementen gibt es auch andere Möglichkeiten als z-index.

Das stimmt, bringt aber nichts wenn schon der Stapelkontext/z-index nur eingeschrängt funktioniert.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Das stimmt, bringt aber nichts wenn schon der Stapelkontext/z-index nur eingeschrängt funktioniert.

z-index ist für das Ein- und Ausblenden von Elementen hochgradig ungeeignet.

Bis demnächst
Matthias

[j4nk3y]

Hallo Matthias,

z-index ist für das Ein- und Ausblenden von Elementen hochgradig ungeeignet.

Ich will es ja nicht ausblenden, sondern hinter einem anderen Element verstecken, damit ich dieses, dann bei :hover/:focus/... und einem entsprechenden transform: translate(X,Y);, besagtes Element verschiebe, damit es sichtbar wird. Es geht mehr um den optischen Effekt des unter dem, im z-index höher liegendem Elementes, hervorkommen.
Dies geht wie gesagt und mit eurer Erläuterung des Stapelkontextes, für ein Paar, an Elementen, aber nicht wenn unter diesem Paar noch um eine Ebene tiefer erweitert wird.

Gruß
Jo

[Nomo der Ator]

Das stimmt, bringt aber nichts wenn schon der Stapelkontext/z-index nur eingeschrängt funktioniert.

Wenn du was einschrägen möchtest nimm skew!

[j4nk3y]

Hey,

Das stimmt, bringt aber nichts wenn schon der Stapelkontext/z-index nur eingeschrängt funktioniert.

Wenn du was einschrägen möchtest nimm skew!

Was?

Gruß
Jo

[Nomo der Ator]

Was?

na, von Schengen hast du wohl nicht gesprochen

[j4nk3y]

Hey,

Was?

na, von Schengen hast du wohl nicht gesprochen

Warum sollte ich von Schengen sprechen? Tut mir leid, ich habe keine Ahnung was du mir sagen möchtest.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Tut mir leid, ich habe keine Ahnung was du mir sagen möchtest.

Er möchte dir sagen, dass eingeschränkt von Schranke kommt und deshalb mit k geschrieben wird.

Bis demnächst
Matthias

[j4nk3y]

Hallo Matthias,

Tut mir leid, ich habe keine Ahnung was du mir sagen möchtest.

Er möchte dir sagen, dass eingeschränkt von Schranke kommt und deshalb mit k geschrieben wird.

Ahh Danke! Hab ich gar nicht gesehen.
Wir bräuchten wirklich mehr Leute, die sich um die ganzen Rechtschreibfehler bemühen, nicht das noch jemand auf den Gedanken kommt etwas nützliches beizutragen.

Gruß
Jo

[j4nk3y]

Guten Morgen Matthias,

um nochmal zu verdeutlichen was ich meine. Jedes Element erzeugt seinen eigenen Stapelkontext, aber eben nicht, wenn das Elternelement bereits einen manuellen z-index erhalten hat. Für mich absolut unlogisch warum .red nicht unter .green und .black nicht unter .red liegt.

Aber vielleicht übersehe ich ja auch was?

Gruß
Jo