Depot43-Unterlagen - Position Absolute

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Position Absolute</title>
	<style>
		div {
			position:static;
			border:1px solid #000;
			background-color:#dedede;
			padding:12px;
			margin:12px
		}
	</style>
</head>
<body>
	<div class="box1">
		<p>Box 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="/unterlagen/css-basic/position/#">Voluptate veritatis</a>, cum sapiente. Expedita at, quia debitis consequatur sed dolores molestiae et ut inventore tempore officiis non, esse reprehenderit rem tempora.</p>
	</div>
	<div class="box2">
		<p>Box 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate veritatis, cum sapiente. <a href="/unterlagen/css-basic/position/#">Expedita at</a>, quia debitis consequatur sed dolores molestiae et ut inventore tempore officiis non, esse reprehenderit rem tempora.</p>
	</div>
	<div class="box3">
		<p>Box 3 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate veritatis, cum sapiente. Expedita at, quia debitis consequatur sed <a href="/unterlagen/css-basic/position/#">dolores molestiae</a> et ut inventore tempore officiis non, esse reprehenderit rem tempora.</p>
	</div>
</body>
</html>


 

            

Aufgabe 16 > weiter

Die Absolute Position entfernt die so formatierten Elemente aus dem Fluss der in HTML angeordneten Reihenfolge und platziert die Elemente nach absoluten Angaben. Es klingt oft verlockend, eine Website so zu gestalten, dass die einzelnen Rahmen-Elemente fix platziert werden, so als wären sie auf einer Buchseite an gewünschter Position. Wenn wir aber für Desktop, Pad und Smartphone responsiv gestalten, ist ein solches Layout keine Option.

Absolute Position und fesgelegte Grösse:

position:absolute; > Positioniert das Element nach folgenden Angaben:
width > die Breite des Elements
height > die Höhe des Elements
top > der Abstand zum Elternelement oben
left > der Abstand zum Elternelement links
right > der Abstand zum Elternelement rechts (nur ohne Angabe links möglich)
bottom > der Abstand zum Elternelement rechts (nur ohne Angabe oben möglich)

Erstelle für jede Box eine eigene Regel. Platziere die Boxen nach folgendem Layout:

Beginne mit Box 1, setzte position, width, heigt, top, left. Beispiel:

        div.box1 {
            position:absolute;
            top:0px;
            left:0px;
            width:200px;
            height: 200px;
        }

Platziere "div.box2" entsprechend, aber weiter nach links.
Platziere "div.box3" entsprechend, aber weiter nach unten und passe die Höhe an.
Untersuche das Erebnis im HTML-Editor. Verkleinere das Browserfenster, so siehst du, dass sich die Boxen nicht anpassen.
Versuche die Angaben für die Breite mit %-Werten zu formatieren.
Untersuche das Erebnis im HTML-Editor. Verkleinere das Browserfenster, so siehst du, dass sich die Boxen wohl skalieren, dass es aber kein sinnvolles Layout erzeugen lässt.