wilmaed: warum ändert position:absolute die Positionierung/Ausrichtung im Element (Container)?

problematische Seite

Bin Anfänger und versuche anhand eines vorhandenen Sample zu lernen und habe 2 Fragen.

Was ich weiß:

a) durch das Setzen von position:absolute ist das Element außerhalbs des Normal Flow.

  1. Das Element wird anhand jenes Vorfahrenelementes positioniert, das nicht static ist. Gibt es solch ein Element nicht, wird es anhand des Fensters (Viewport) positioniert.

Korrekt? Dann zu meinen 2 Fragen:

Frage1: https://codepen.io/wilmaed/pen/yzEjBG wenn ich position: absolute; entferne, dann hat es eine optische Wirkung von vertical-align: bottom. Ich setze absolute im Container ul. Warum hat das eine Auswirkung auf die Kinder? Wenn die Kinder rauf/runter geschoben werden: wo ist der Bezugspunkt?

Frage2: wo kommt der schwarze Abstand links her? Die Whitespace im div/ul/ul sind nicht die Ursache (hab das Entfernen probiert, da display:inline-block verwendet wird)

Der Code ist das Grundgerüst von: https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/

Danke vielmals

  1. problematische Seite

    @@wilmaed

    Frage1: https://codepen.io/wilmaed/pen/yzEjBG

    Bitte verlinken: <url> bzw. [text](url) oder per Button über dem Eingabefeld. Ich hab das mal für dich gefixt.

    Bei CodePen sollte im Feld HTML nur der Inhalt des bodys stehen. Also nicht der head, nicht die html- und body-Start und -End-Tags.

    wenn ich position: absolute; entferne, dann hat es eine optische Wirkung von vertical-align: bottom.

    Wie meinen? Ich sehe in deinem Pen nichts von vertical-align: bottom.

    Frage2: wo kommt der schwarze Abstand links her?

    Aus dem Browserstylesheet. Damit Listen eingerückt sind (Platz für die Bullets), lassen Browser da üblicherweise 40px Platz. Das kannst du auch im Entwicklerwerkzeug deines Browsers sehen; hier Firefox:

    Und mit padding-left: 0 überschreiben. Mag sein, dass es in anderen Browsern margin-left ist.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. problematische Seite

      Servus!

      @@Gunnar Bittersmann

      Aus dem Browserstylesheet. Damit Listen eingerückt sind (Platz für die Bullets), lassen Browser da üblicherweise 40px Platz. Das kannst du auch im Entwicklerwerkzeug deines Browsers sehen; hier Firefox:

      Bisher dachte ich immer, dass die Eigenschaften alphabetisch aufgelistet sind (Wo ist eigentlich mein Firebug geblieben - beim letzten Update vom Firefox wohl wieder entfernt?)

      Gibt es da eine Reihenfolge?

      Herzliche Grüße und vielen Dank im Voraus!

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. problematische Seite

        Hallo Matthias Scharwies,

        Bisher dachte ich immer, dass die Eigenschaften alphabetisch aufgelistet sind (Wo ist eigentlich mein Firebug geblieben - beim letzten Update vom Firefox wohl wieder entfernt?)

        Firebug wird nicht mehr gepflegt, die Entwickler selbst empfehlen die eingebauten Entwicklertools.

        Gibt es da eine Reihenfolge?

        die, die im Stylesheet steht.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. problematische Seite

          Tach!

          Gibt es da eine Reihenfolge?

          die, die im Stylesheet steht.

          Vielleicht bei gleicher Spezifität. Ansonsten sortiert sich das nach dieser, absteigend.

          dedlfix.

          1. problematische Seite

            Hallo dedlfix,

            gemeint war die Reihenfolge der Eigenschaften innerhalb eine Regel.

            Die Regeln selbst sind absteigend nach Spezifität, klar.

            Rolf

            --
            sumpsi - posui - clusi