warum ändert position:absolute die Positionierung/Ausrichtung im Element (Container)?
wilmaed
- css
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.
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
@@wilmaed
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 🖖
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
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
Tach!
Gibt es da eine Reihenfolge?
die, die im Stylesheet steht.
Vielleicht bei gleicher Spezifität. Ansonsten sortiert sich das nach dieser, absteigend.
dedlfix.
Hallo dedlfix,
gemeint war die Reihenfolge der Eigenschaften innerhalb eine Regel.
Die Regeln selbst sind absteigend nach Spezifität, klar.
Rolf