Zum Hauptinhalt springen

Positionieren: Kästchen verschieben

Es gibt 2 Arten von Kästchen: Block-Elemente und Inline-Elemente

Block-Elemente:

Block-Elemente sind Kästchen, die, ohne Angabe der Breite, immer so breit sind wie das "Elternelement". Egal wie gross die Seite bzw. das "Elternelement" ist, sie reichen immer vom linken bis zum rechten Rand.
Block-Elemente werden meistens benutzt, um weitere Elemente darin unterzubringen

Um das Verhalten der nachstehenden Block-und Inline-Elementen zu beobachten, sollten Sie das Browserfenster ab und zu in der Breite verändern:

Das <h1>-Element für eine Überschrift.

Das <p>-Element ist ein Textabsatz. Hier schreibt man zusammenhängenden Text rein der sich durch einen neuen Absatz von anderem Text abhebt.

Die <p>-Elemente beginnen immer mit einem neuen Zeilenanfang und haben etwas mehr Abstand zueinander wie der normale Fliesstext.
<br>
<br>
Hier kommt jetzt Nonsenstext:

Was ist Lorem Ipsum? Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte....

Das <article>-Element
Das <div>-Element
    Das <ul>-Element für ungeordnete Listen ("u"nordered "l"ist"):
  • Listeneintrag 1
  • Listeneintrag 2
  • Listeneintrag 3
  • Listeneintrag 4
  • Listeneintrag 5
    Das <ol>-Element für geordnete Listen ("o"rdered "l"ist"):
  1. Listeneintrag 1
  2. Listeneintrag 2
  3. Listeneintrag 3
  4. Listeneintrag 4
  5. Listeneintrag 5

Hier sind noch einige gebräuchliche Block-Elemente in HTML:
<header> <nav> <main> <footer> <div> <figure> <hr> <li> <h1> bis <h6> <section> <video> u.a.

Inline-Elemente:

Inline-Elemente sind Kästchen, die nicht breiter als ihr eigentlicher Inhalt sind.
Inline-Elemente beginnen nicht in einer neuen Zeile!

Um die nachstehenden flex-und-grid von Inline-Elementen zu beobachten, sollten Sie das Browserfenster jetzt in der Breite verändern.


Beispiel: Ein Bild (Inline-Element) wird in einem <p>-Element (Block-Element) in einen laufenden Text eingefügt.

Spielen Sie mit der Fensterbreite ;-)

Ich bin der laufende Text in einem p-Element. Hier füge ich jetzt ein Bild ein: Demobild für Inline-Element Ich kann auch nach dem Bild weiterschreiben. Die Unterkante des Bildes ist auf der gleichen Ebene wie der Textfluss. Natürlich kann dieses Verhalten später auch mit CSS verändert werden. Es geht nur darum, die Positionierung von Inline-Elementen zu verdeutlichen.

Hier sind einige gebräuchliche Inline-Elemente in HTML:
<a> <b> <br> <em> <i> <img> <small> <span> <strong> usw...

Wann verschieben wir denn nun die Kästchen?

Jetzt!

position: static; der normale HTML-Flow

Der normalen HTML-Flow wird von den Browsern als "Werkseinstellung" (position: static) ausgeliefert und braucht nicht extra angegeben werden.

Die Darstellung wird so angezeigt, wie sie im HTML-Code angeordnet wurde.
Das heisst: von links nach rechts und von oben nach unten.

(Die grüne Umrandung soll das Elternelement "body" darstellen)

HTML:
<body>           
    <header>
    ...
    </header>
    <main>
    ...
    </main>
    <footer>
    ...
    </footer>
</body>

Das header-Element (Block-Element)

Blockelemente nehmen die gesamte verfügbare Breite des Elternelements ein. Das Elternelement von "header" ist in diesem Fall der hier grünumrandete "body". Es ist nicht der richtige "body" sondern nur ein Simulierter. Der "richtige" body" ist die gesamte Seite!
Unser body hat auch keine Breiten- o. Höhenangaben. Er passt sich dem Platzbedarf des Inhaltes an. Beim Verkleinern der Fensterbreite, vergrössert sich das Kästchen nach unten um den Inhalt weiterhin anzuzeigen.

Das main-Element (Block-Element)

Ich habe wenig Inhalt und bin deshalb etwas kleiner :-)

Das footer-Element (Block-Element)

Hier ist besonders viel Inhalt:


Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch den Sprung in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.

position: static; Es ist keine Positionierung möglich, nur Abstände mit "margin".

Zur besseren Darstellung gebe ich den Blockelementen eine unterschiedliche Breite!

(Die grüne Umrandung soll das Elternelement "body" darstellen)

position: static;
width: 40%
top: 20px;
left: 10px;

(top und left Positionierung funktionieren nicht!)
(Aber margin funktioniert)

position: static;
width: 60%
margin-top: 5px;
margin-left: 170px;
margin-bottom: 60px; (siehe unten)

(Die Aussenabstände "margin" funktionieren)
position: static;
width: 90%;
margin-top: 60px;
margin-left: 10px;
margin-bottom: 30px;

Achtung (engl. margin collapsing):
Bei "margin-top: 60px;" fallen 2 konkurierende Margins zusammen!

Das "margin-bottom: 60px;" vom oberen main-Element und das "margin-top: 60px;" von diesem footer-Element.

Die beiden "margins" werden nicht addiert!
Es kann nur Einen geben :-)
Möchte ich hier auch 60px nach oben haben, dürfte nur eines der beiden Elemente main oder footer das entsprechende Margin haben. Ansonsten wird bei ungleichen Werten nur der grössere Wert von beiden übernommen. Der andere Wert wird ignoriert.

position: static erzeugt beim HTML-Flow die Einhaltung der Reihenfolge und hat sonst keine besondere Relevanz.

position: relative;
Ein Element mit der "position: relative" wird mit den Werten von "top/right/bottom/left" von seiner ursprünglichen Position verschoben.

Die anderen Elemente kriegen davon nichts mit und bleiben einfach an ihren Positionen stehen.

position: relative;
top: 30px;
left: 10px;

(Das Elternelement aller 3 DIV's ist der body.
Der header stösst sich vom body ab und schiebt sich, um die 30px von oben, unter das main-Element.)


position: relative;
top: 0px;


(Das main-Element hat noch keine bestimmten Werte für die entgültige Position.
Es ist im Flow an seinem ursprünglichen Platz geblieben. Erst wenn ich ihm auch top: 30px; angebe rutscht es wieder ("relativ": bezogen auf den header) an das untere Ende von header. Seinem ursprünglichem Platz.)
position: relative;
top: 0px;

(Der Footer hat auch noch keine Positionierung und klebt an main unten fest. Sein ursprünglicher Platz.)

position: relative; Nun wird "main" positioniert

position: relative;
top: 40px;
left: 10px;

(Der header schob sich vorher 30px unter das main-Element.)


position: relative;
top: 30px;


(Das main-Element hat jetzt auch top: 30px; und schiebt sich unter den footer der noch nicht positioniert ist)

position: relative;

(Der Footer hat keine Positionierung und wird von main 30px "unterwandert.)

position: relative; Weitere Positionierung von "footer"

position: relative;
top: 40px;
left: 10px;

(Der header schob sich vorher unter das main-Element.)


position: relative;
top: 30px;


(main schob sich vorher unter das footer-Element.)

position: relative;
top: 30px;

(Der Footer hat nun auch top: 30px; passt sich wieder unten an "main" an und fliesst leider unten 30px über das Elternelement hinaus!!!.) HILFE :-(


Was passiert hier?
Was weiter oben beschrieben wurde: Alle Elemente die ohne Positionierung sind bleiben an ihrem ursprünglichen Platz stehen. Hier ist es das Elternelement mit dem grünen Rand und der immer noch browsereigenen position: static.

Abhilfe:
overflow-y: scroll; im Elternelement würde dort einen Scrollbalken erzeugen und der Footer würde sich unter "main" anpassen.
Das wollen wir hier allerdings nicht!

Mit "margin-bottom: 30px;" würde sich der Footer aber vom Elternelement (position: static) abstossen können. Wie am Anfang der Header!

position: relative; Lösung für das Footer-Problem

position: relative;
top: 40px;
left: 10px;

(Der header schob sich vorher unter das main-Element.)


position: relative;
top: 30px;


(main schob sich vorher unter das footer-Element.)

position: relative;
top: 30px;
margin-bottom: 30px;

(Der Footer bekommt ein "margin-bottom: 30px;".
Dadurch drückt er den unteren Rand des Elternelements 30px nach unten und passt sich wieder ein)

Dem "footer" wurde ein "margin-bottom: 30px" verpasst.

Das war jetzt nur zu Demonstrationszwecken gedacht. Beim Arbeiten im "richtigen body" werden sich die Kästchen nicht über den "body" schieben.

position: fixed; Hat jemand den Footer gesehen?

Ein Element mit der "position: fixed" ist immer in seinem Elternelement irgendwo fixiert (feststehend. Es klebt irgendwo in seinem Elternelement auf dem Monitor (hier jetzt oben rechts)

In unserem Beispiel klebt er im body als Elternelement. Obwohl der Footer in dem grünen "Pseudo-Body" als sein Elternelement war. Das hat damit zu tun, dass das grüne Kästchen keine Positionierung hatte. fixed sucht sich dann das nächststehende höhere Elternelement. In diesem Beispiel ist es der richtige body gewesen!

position: relative;
top: 0;
left: 0;


position: relative;
top: 0;
margin-left: 120px;

Der footer ist verschwunden!?

position: fixed;
top: 0;
right: 0;

Footer

Ich fehle irgendwo da unten bei "position: fixed;"... ;-)

Der "footer" mit "position: fixed" hat seinen ursprünglichen Platz hier oben drüber verlassen und klebt jetzt irgendwo auf dem Bildschirm in Ihrer Sichtweite (oben rechts).
Sein vorherige Platz wird von den anderen Elementen eingenommen.

position: sticky; Scrollt mit und bleibt dann im Elternelement hängen

Ein Element mit der "position: sticky;" und z.B. "top: 0;" bleibt beim Scrollen im Elternelement oben "kleben".
Es scrollt ansonsten normal mit. Der Rest des Inhaltes scrollt normal weiter.
Siehe Beispiel:
Bitte innerhalb des Kästchens scrollen!

position: relative;
height: 200px;
top: 40px;
left: 10px;

(Der header schob sich vorher unter das main-Element.)


position: sticky;
height: 200px;
top: 0;

(main bleibt beim Scrollen oben hängen!)

Keine Postitionsangabe ==> Footer und Text laufen unterhalb von "sticky" main durch.

position: relative; ==> Der Footer lauft über "sticky" main und der Text unter main durch.


Der Footer in diesem Beispiel ist ohne Positionierung.

Demotext, bitte nur in diesem Kästchen scrollen!

Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch den Sprung in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Das rote "main" mit "position: sticky"

position: absolute;Verlässt den normalen HTML-Flow und kann innerhalb seines unmittelbaren Elternelements überall positioniert werden. Ist kein positioniertes vorheriges Element vorhanden gilt der "body" als Orientierung. Kann andere Elemente überdecken.

Beispiel: Der grüne body hat Position: relative;.
header und main haben keine Positionierung

Nur der footer hat position: absolute;

position: keine;
top: 30px; <== keine Position, keine Wirkung!
left: 10px; <== keine Position, keine Wirkung!


(....)


position: keine;
width: 60%;
top: 30px; <== keine Position, keine Wirkung!
margin-left: 120px;<== margin geht immer


(....)

footer
position: absolute; <== nur position: absolute;
max-width: 90%; <== nur Kosmetik um den daruterliegenden Text zu sehen
bottom: 30px; <== Der Footer ist aus dem HTML-Flow und rutscht bis auf 30px vom unteren Ende des Elternelements.

(Der nachfolgende Text nimmt nun den ehemaligen Platz von footer ein!)


Lösung bei z.B. gewünschten "top: 10px;"

1.) Elternelement ist ohne Positionierung:
Der Footer würde jetzt an den oberen Anfang, des noch früheren Elternelements, springen. Ist kein Elterelement da, springt er an den Anfang von body.

2.) Elternelement position: fixed:
Das gesamte Elternelement ist "verschwunden"! 6188px on top???

3.) Elternelement position: sticky:
Der Footer ist nun 10px vom oberen grünen Elternelement entfernt.

4.) Elternelement position: absolute:
Der Footer ist 10px vom oberen grünen Elternelement entfernt.
Wobei das Elternelement jetzt eine neue Position (absolute) einnehmen wird!

5.) Elternelement position: relative:
Der Footer ist 10px vom oberen grünen Elternelement entfernt.

Dieser Demotext rutscht bei Footer "position: absolute;" an die Stelle des ehemaligen Footers.

Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch den Sprung in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.

Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch den Sprung in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.

Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch den Sprung in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.

Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch den Sprung in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.


Ein Kästchen mit "position: absolute;" macht nur Sinn, wenn das Elternelement eine eigene Position (z.B. relative) und eine vorgegebene Grösse hat!