Position
Code Sources Icon Code Sources Icon

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

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.

  1. Untersuche den HTML-Code im Editor. Du siehst drei div-Boxen, darin Text mit je einem Link.
  2. Erstelle eine neue Regel für diese Links, Positioniere sie Absolute. Beispiel:
            a {
                position:absolute;
                top:0px;
            }
  3. 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.
  4. Auch wenn dies praktisch wenig Sinn macht, zeigt es deutlich was passiert, wenn Elemente anders Positioniert werden.
DB-Table: cssbasic15