CSS positionieren: top, right, bottom, left

Positionieren und Platzieren

Absolut oder fixed positionierte Blöcke werden aus dem normalen Fluss des Dokuments genommen. Ihr Container – der umfassende Block – ist entweder das Dokument oder ein relativ positionierter Block. Der Inhalt von Blöcken mit position: absolute wird durch top, right, bottom, left verschoben und hinterlässt eine Lücke. Absolute Positionierung ist absolut nicht intuitiv …

top, right, bottom und left gelten nur für positionierte Elemente. Bei statischen Elementen wird der Abstand zum umfassenden Block durch margin-top, margin-right, margin-bottom und margin-left bestimmt und top, right, bottom, left haben keine Wirkung.

• Liegt ein Element mit position : absolute oder position : fixed in einem relativ positionierten Element, bestimmten top, right, bottom und left den Abstand vom Rand des relativ positionierten Elements.
• Liegt ein positioniertes Element in einem statischen Element (ohne Positionierung), ist top, right, bottom und left der Abstand vom Rand des Dokuments.

.container {
	position: relative
}

.container img {
	position: absolute;
	top: 20px;
	left: 30px;
}

Mit positiven Werte versetzen top, right, bottom und left ein positioniertes Element innerhalb ihres umfassenden Elements. Negative Werte positionieren das Element über, rechts von, unter bzw. links vom Container.

Wenn für ein Element sowohl top als auch bottom gesetzt werden, wird das Element nicht auf die Größe des umfassenden Containers aufgezogen, sondern top gewinnt. Auf gleiche Weise gewinnt left vor right.

inset (top, right, bottom, left)

inset ist die Kurzschrift für alle vier Werte und hat genauso wie die vier einzelnen Angaben keinen Einfluss auf statische Elemente.

Ein Element zentriert am unteren Rand des umfassenden Blocks positionieren:

.container {
	position: relative
}

.container img {
  position: absolute;
  border-radius: 50%;
  inset: auto calc(50% - 100px) 0 calc(50% - 100px);
          ▲           ▲         ▲           ▲
          |           |         |           |
          └- top      └- right  └- bottom   └- left
}

Die Reihenfolge der Elemente kennen wir schon von der Kurzschreibweise für margin.

Text über einem Bild positionieren

Ein Overlay – das Überlagern – von Text über dem Bild ist eine klassische Anwendung von relativer und absoluter Positionierung mit top, right, bottom, left.

CSS top, right, bottom und left haben numerische Werte – sind also animierbar (animiert auf click, damit die Bildunterschrift auch auf Geräten mit Touch-Oberfläche gezeigt werden kann.)

figure {
	position: relative;
	overflow: hidden;
}
.figure img {
	display: block;
}
figcaption {
	position: absolute;
	opacity: 0;
	top: 100%;
	left: 0;
	transform: translateY(0%);
	transition: all 1.5s ease;
}

.capdemo figcaption.slideUp {
	opacity: 1;
	transform: translateY(-100%);
}

Am Rande: Animiert mit Vanilla Javascript … ganz einfach:

const img = document.querySelector ("figure img");
img.addEventListener ("click", function () {
	document.querySelector ("figcaption").classList.toggle ("slideUp");
})

margin-top vs top

Bei relativ oder statisch positionierten Blöcken regeln margin-top und margin-bottom den Abstand der Box von vorangehenden bzw. folgenden Blöcken und margin-left bzw. margin-right den Abstand vom linken / rechten Rand des umfassenden Blocks.

Bei Blöcken mit position:absolute oder position:fixed regeln top, right, bottom und left den Abstand zur umfassenden Box. Absolut / fixed positionierte Blöcke kümmern sich nicht um vorangehende oder folgende Blöcke.

Oben, rechts, unten oder links ausrichten

CSS top, right, bottom und left steuern den Abstand der absolut positionierten gelben Box vom Rand des Dokuments bzw. Rand eines relativ positionierten umfassenden Blocks.

Erblich: Nein

top right bottom left

top ist der Abstand des oberen Randes des Inhalts zum oberen Rand des umfassenden Blocks.

right ist der Abstand des rechten Randes des Inhalts zum rechten Rand des umfassenden Blocks.

bottom ist der Abstand des unteren Randes des Inhalts zum unteren Rand des umfassenden Blocks.

left ist der Abstand des linken Randes des Inhalts zum linken Rand des umfassenden Blocks.

Werte

<length> | <percentage> | auto | inherit

auto (Voreinstellung)

legt fest, dass der Browser den Abstand zum umfassenden Block bestimmt. Wenn sowohl width oder height als auch right oder left als "auto" angegeben werden, wird die Breite des Elements durch seine Inhalte bestimmt (ähnlich wie bei Tabellen).

<length>

cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

<percentage>

legt den Abstand des Elements zum umfassenden Block relativ zur Größe des umfassenden Blocks fest. Das Prozentzeichen ist zwingend erforderlich.