Position

Positionen der HTMLElemente können mit CSS bestimmt werden. Es gibt verschiedene Möglichkeiten das Positionsverhalten zu beinflussen. Ohne zusätzlich Regel werden alle HTML-Elemente als "position:static; (Standardverhalten) definiert.

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Position</title>
	<style>
		div {
			position:static;
			border:1px solid #000;
			background-color:#dedede;
			padding:12px;
			margin:12px
		}
	</style>
</head>
<body>
	<div class="box1">
		<p>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>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>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 15 > weiter

Das "normale" Verhalten von HTML-Elementen, die in einer seite Platziert werden ist "static". Alle Block-Elemente erzeugen eine neue Zeile, in der reihenfolg, in der sie im HTML geschrieben werden.

Alle Inline-Elemente bleiben im Fluss der HTML-Syntax. Ein Link im Text fliesst mit dem Text.

Untersuche den HTML-Code im Editor. Du siehst drei div-Boxen, darin Text mit je einem Link.

Erstelle eine neue Regel für diese Links, Positioniere sie Absolute. Beispiel:

        a {
            position:absolute;
            top:0px;
        }

Prüfe das Ergebnis. Du siehst, dass nun alle drei Links aus ihrem ursprüngliche Kontext gerissen werden und an der oberen Kante des HTML-Feldes Platziert werden.
Auch wenn dies praktisch wenig Sinn macht, zeigt es deutlich was passiert, wenn Elemente anders Positioniert werden.

DB-Table: cssbasic15