Markup

Absolut und relativ

Wieder eine kleine Gedächtnisstütze:

Die absolute Position eines Elements wird relativ zum Elternelement berechnet, wenn dieses ebenfalls positioniert wird. Andernfalls dient der Seiteninhalt (<body>) als Referenz.

Folgende Anweisungen im CSS:


#header {
	position: relative;
	height: 140px;
	border-bottom: 1px solid #ddd;
}
h1 {
	padding: 0; margin: 0;
	position: absolute;
	right: 0px;
	bottom: 25px;
}

Ergibt also die Überschrift h1 absolut im Element #header positioniert, also 25 Pixel von unten und 0 Pixel vom rechten Rand von #header:

absolut positionierte Überschrift

So lassen sich Elemente schön ausrichten, in meinem Fall kommt zum Seitentitel (mit Hintergrundgrafik) ein vertikales Menü.

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.