Die Mitgliederversammlung findet am 25.11.2023 um 10:00 statt; davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein.
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.
CSS/Tutorials/Ausrichtung/position
Mit der Eigenschaft position können Elemente aus dem normalen Fluss entfernt und an jeder beliebige Stelle des Viewports positioniert werden. Auf andere Elemente haben positionierte Elemente keinen Einfluss.
Zur Festlegung der Position dienen die so genannten Inset-Eigenschaften (inset: Einsatz, Anschlag)
top,
left,
bottom und
right (physische Angaben)
sowie
inset-block-start,
inset-inline-start,
inset-block-end und
inset-inline-end (logische Angaben). Der Punkt, auf den sich die Werte dieser Eigenschaften beziehen, hängt vom Wert von position ab.
Folgende Werte für position sind möglich:
- Normaler Elementfluss
-
- static
- (Standardwert) Das Element verbleibt im Textfluss.
- Die Inset-Eigenschaften werden ignoriert.
- Das Element bildet keinen Bezugsrahmen für absolut positionierte Elemente
- relative
- Das Element wird vom Browser platziert, als sei es statisch, und die übrigen Elemente werden entsprechend angeordnet. Danach wird es auf die angegebene Position verschoben, seine Größe bleibt unverändert.
- Die Inset-Eigenschaften beziehen sich auf die jeweilige Kante des Elements.
- Der ursprünglich für das Element vorgesehene Platz bleibt frei
- Zusammen mit z-index entsteht ein Stapelkontext
- sticky
- Eine Mischung aus
relativeundfixed. Ausgehend von dem nächsten Elternelement, das einen Scrollcontainer bildet, wird ein Rechteck erstellt, das entsprechend der Werte der Inset-Eigenschaften dessticky-Elements verkleinert wird. Dabei sind nur diejenigen Kanten dieses Rechtecks sind relevant, für die eine Inset-Eigenschaft festgelegt wurde. Solange sich dassticky-Element innerhalb dieses Recktecks befindet, bleibt es statisch. Sobald es aber über eine der relevanten Kanten hinausragt, wird es so verschoben, dass es innen an dieser Kante anliegt.
- Positionierte Elemente
- Positionierte Elemente werden aus dem Elementfluss entfernt. Die Anordung der übrigen Elemente im Dokument erfolgt so, als würde es das positionierte Element nicht geben.
- absolute
- Der Bezugsrahmen für die Positionierung ist das nächstgelegene Elternelement mit einem
position-Wert ungleichstatic.- Zusammen mit
z-indexentsteht ein Stapelkontext
- Zusammen mit
- fixed
- ähnlich wie absolute, aber der Bezugsrahmen ist kein Element im DOM, sondern der Viewport (das Browserfenster oder eine Druckseite). Das bedeutet, dass das Element beim Scrollen an einer festen Position auf dem Bildschirm bleibt.
- Das Element erzeugt auch ohne Angabe von
z-indexeinen Stapelkontext
- Das Element erzeugt auch ohne Angabe von
Webseiten ohne Festlegung von
display und position sind bereits responsiv und zugänglich!position: static
position:static ist der Defaultwert der Eigenschaft position. Das Element verbleibt im Textfluss. Die Eigenschaften top, bottom, left, right werden ignoriert.
position: relative
Mit position:relative kann man das Element mit top, bottom, left und right ausrichten. Die Lücke im Textfluss bleibt bestehen.
a {
position: relative;
top: -.9em;
left: -1.2em;
}
Öffnen Sie dieses Beispiel im Frickl mit "Ausprobieren" und erhöhen Sie den top-Wert auf -3em. Wie Sie sehen, verdeckt der Link die Überschrift.
Falls Sie den Link wirklich nach oben schieben wollen, bietet sich hier wie oben display: inline-block und ein padding-bottom an.
position: absolute
Mit position:absolute kann man Elemente losgelöst vom Textfluss positionieren, an eine Stelle, die per left, right, top und bottom festgelegt wird. Eine Lücke bleibt dabei nicht bestehen. Größenangaben, wie width und height, oder Abstände, wie margin und padding, sind ebenfalls möglich.
Verwenden Sie absolute Positionierung deshalb nur in begründeten Ausnahmefällen!
Möchte man eine Navigation bauen, in der sich die Untermenüs an der Hauptnavigation ausrichten, könnte man den Navigationspunkten der Hauptnavigation die Eigenschaft position: relative geben und hätte damit den Bezugspunkt für die jeweiligen Kind-Elemente geschaffen. Im Beispiel ist das einzige Kind-Element eine weitere Liste, die – dank absoluter Positionierung – aus dem Textfluss herausgenommen wird. Fährt man nun mit der Maus über einen Hauptlistenpunkt erscheint das Untermenü.
nav > ul > li {
position: relative;
display: inline-block;
padding: .6em;
background-color: #FEA;
width: 6em;
}
nav > ul > li > ul {
position: absolute;
list-style-type: none;
margin: 0;
padding: .6em;
background-color: #AEF;
top: 2.5em;
left: 0;
width: 6em;
display: none;
}
Die Angaben left, right, top und bottom beziehen sich dabei auf das nächste Vorfahrenelement, welches mit position positioniert wurde. Hat das Element keine solchen Vorfahrenelemente, wird als Bezugspunkt das Wurzelelement angesehen – in HTML-Dokumenten also das HTML-Element (bei XML wäre es das XML-Element).
absolute Positionierung eines Tooltipps
Auch ein Tooltip, eine Sprechblase mit Erläuterungen, soll an der jeweils passenden Stelle außerhalb des Elementflusses eingeblendet werden.
.tooltip {
position: relative;
}
.tooltip span[role=tooltip] {
display: none;
}
.tooltip:hover span[role=tooltip] {
display: block;
position: absolute;
bottom: 2em;
left: -6em;
width: 15em;
z-index: 100;
}
Die im span enthaltene Erklärung erhält keine Klasse, sondern wird über ihren Attributwert [rel=tooltip] angesprochen. Normal wird sie nicht dargestellt (display:none).
Bei :hover wird der Wert auf display: block geändert. Dieses Blockelement wird mit position: absolute oberhalb des Begriffs über das schon Gelesene platziert. {{Beachten|,|dass Sie dem Elternelement ein position: relative geben müssen.
Pseudoelemente vor Links
Schon im Einstieg in CSS-Kurs gab es ein Beispiel, in dem Links durch Pseudoelemente ergänzt wurden. Diese Pseudoelemente sollen sich nie verschieben, sondern immer neben dem Bezugspunkt positioniert werden.
a {
padding: 0 1em;
position: relative;
}
a::before {
content: '';
position: absolute;
top: 3px;
left: 0;
width: 0;
height: 0;
font-size: 0;
border: 8px solid transparent;
border-left-color: currentColor;
}
Das a-Element wird mit position: relative zum Bezugspunkt; das absolut positionierte Pseudoelement an den linken Rand um 3px nach oben positioniert.
Es mag verwirren, das Höhe und Breite 0 betragen. Der 8px breite Rand ist transparent – nur dem linken Rand wird durch border-left-color: currentColor; mit dem Farbwert currentColor die aktuelle Textfarbe zugewiesen.
position: fixed
Möchte man ein Element starr am Viewport ausrichten, (beispielsweise eine fixe Fußzeile oder einen Link zum Seitenanfang in einer Ecke) dann ist position: fixed das Mittel der Wahl. Genau wie bei position: absolute wird das Element aus dem Textfluss entnommen, es entsteht also keine Lücke. Positioniert wird klassisch mit den CSS-Eigenschaften top, bottom, left und right.
#toplink {
position: fixed;
bottom: 0;
right: 0;
}
Ein feststehender Footer ist ein Footer, der am unteren Bildrand feststeht und damit immer zu sehen ist, unabhängig davon, wie die Seite gescrollt wird.
Dieses Beispiel arbeitet mit position mit dem Wert fixed.
Als Grundstruktur verwenden wir unsere Webseite mit einem einfachen Footer aus dem HTML5-Tutorial in der letzten Version eines Holy-Grail-Layouts:
body {
padding-bottom: 3em;
}
footer {
position: fixed;
padding: .6em;
bottom: 0;
left: 0;
right: 0;
}
Mittels position: fixed wird das footer-Element als feststehendes Element definiert, mittels bottom: 0; wird es genau auf der Unterkante des Darstellungsbereiches, also ganz unten, positioniert.
Unschön an diesem Beispiel ist, dass der Kontakt-Link und das Copyright bei großen Viewports außerhalb des eigentlichen Satzspiegels ist. Dies wird im nächsten Beispiel gelöst.
position: fixed; können Sie den gleichen Effekt auch mit
erreichen.position: sticky
Mit der Eigenschaft position: sticky können Sie verhindern, dass ein Element aus dem sichtbaren Bereich seines Scrollcontainers hinausgeschoben wird. Für jede seiner vier Seiten können Sie mit den Inset-Eigenschaften einen Abstand zum Rand des Scrollcontainers festlegen, der nicht unterschritten werden soll. Verschiebt der Nutzer den Inhalt des Scrollcontainers soweit, dass der entsprechende Abstand unterschritten würde, dann schiebt der Browser das sticky-Element soweit zurück, dass der Abstand wieder hergestellt ist. Auf den Seiten, für die keine Inset-Eigenschaft gesetzt ist, kann das Sticky-Element aus dem sichtbaren Bereich seines Scrollcontainers verschwinden.
Diese Verschiebung entspricht der eines Elements mit position: relative, d.h. das sticky-Element befindet sich ganz normal im Elementfluss, und die übrigen Elemente behalten ihre Position auch nach einer Verschiebung.
Mittlerweile wird position: sticky von allen modernen Browsern unterstützt!
Die CSS Spezifikation Positioned Layout Module Level 3 beschreibt das Verhalten von sticky so: Bilden Sie ein Kontrollrechteck, das so groß ist wie der Scrollcontainer. Auf den Seiten, für die sticky-Element eine Inset-Eigenschaft festlegt, verkleinern Sie dieses Rechteck um den Wert der Inset-Eigenschaft - beispielsweise würde top:2em; oben 2em vom Kontrollrechteck abschneiden. Auf den Seiten, wo keine Inset-Eigenschaft festgelegt ist, vergrößern Sie das Rechteck bis ins Unendliche. Der Browser prüft nun während des Seitenlayouts, ob das sticky-Element vollständig im Kontrollrechteck liegt. Wenn nicht, wird es soweit verschoben, bis das wieder der Fall ist.
Es ist natürlich nicht auszuschließen, dass das sticky-Element in einer oder in beiden Richtungen größer ist als das Kontrollrechteck. Das kann passieren, wenn Sie beide Abstände für eine der Richtungsachsen der Seite vorgeben (also z.B. left und right. In diesem Fall erhält diejenige Seite den Vorzug, die aus Sicht der logischen Eigenschaften die start-Seite bildet. Auf einer Seite mit westeuropäischem Schreibstil wären das top (inset-block-start) und left (inset-inline-start).
sticky wird oftmals dafür verwendet, ein Element im Viewport zu behalten, wenn die Seite gescrollt wird. Das funktioniert aber nur, wenn der Scrollcontainer des sticky-Elements der äußerste Scrollcontainer der Seite ist.header {
position:sticky;
top: 0;
left: 0;
right: 0;
}
nav {
position: sticky;
top: 10em;
}
footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
}
Im Beispiel werden Header, Navigation und Footer mit position: sticky so an den oberen bzw. unteren Rand „geklebt“, dass sie immer sichtbar sind.
Auch bei langen Listen kann die Überschrift immer im Blick gehalten werden:
h2 {
position: sticky;
top: -1px;
background: #337599;
border-bottom: thin solid #113;
border-top: thin solid #113;
color: #fff;
margin: 0;
padding: 2px 0 0 12px;
}
position: sticky wieder auf.
@media all and (max-width: 35em) {
#sticky {
position: static;
}
}
thead und tr.Siehe auch
Beides sollte vermieden werden, indem man scroll-padding-top auf die Höhe des Headers setzt. Da man diese i.a.R. nicht kennen kann, muss sie mit JavaScript ermittelt werden – initial und bei Änderungen der Höhe, letzteres am besten mit ResizeObserver. Die Übergabe erfolgt dann vorzugsweise über eine custom property.[1]
Weblinks
- Matthias Apsel: position richtig verwenden
- thestyleworks.de: Zusammenspiel von display, position und float
- maddesigns.de: CSS3 – position: sticky
- thenewcode.com: scroll to top then fixed
- ↑ SELF-Forum: feststehender header vom 12.10.2023 von Gunnar Bittersmann
