Der Unterschied zwischen Absolute und Z-Index ?

  • Hallo, ich versuche mich grade an einem Preloader... ich hab nen soweit schönen gefunden und spiele daran herum um zu verstehen wie es funktioniert... der preloader ist in position absolute... jedoch wenn ich versuche es gegen einen hohen z-index zu tauschen funktioniert es nichtmehr... wieso ? :O



    CSS


    ändere ich das so um funktionert es nichtmehr


    Den Rest habe ich nicht geändert :D

  • Das selbe ist eigentlich falsch ausgedrückt.

    Positionen werden halt mit absolute , oder relative zum Elternelement angeordnet ( es gibt noch fixed usw...).

    Wenn du nur ein Element im body hast , was position:absolute;top:0;left:0 hat , ist es dann halt ganz oben Links in der Ecke.


    Wenn du jetzt 2 Elemente hast mit den gleichen Angaben , was passiert dann ?

    Beide Container liegen am gleichen Feld und liegen übereinander.

    Der Container der zum schluss erstellt wird , der ist sichtbar.

    Dafür gibt es z-index.

    Wenn du den ersten Container sehen willst , gibst du ihn ein z-index was höher als der anderen Container ist.


    Dann nehmen wir mal zb das gleiche mit position:relative.

    Der erste Container ist auch oben Links in der Ecke.

    Der zweite währe dann aber relative zum ersten Container gesetzt ( ich kann das nicht gut erklären ). Auf jedenfall liegen die dann nicht übereinander , wozu man dann kein z-index brauchen tut.


    Man könnte die auch übereinander legen wenn man mit Minus Werte arbeiten würde, doch wenn man relative nutzt ,

    will man das eigentlich schon vermeiden.

    Wenn sie übereinander sind ,kann man auch da mit z-index den Container nach vorne holen den man sehen will.


    An besten wäre wenn man ein Beispiel macht bei Codepen wo du sehen kannst was passiert wenn man die position und z-Index Angaben Werte ändert.

    Gerade bei solchen sachen finde ich das man das im Beispiel besser verstehn tut

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!