positions:
CSS positions

CSSWertBedeutung
positions:static;Standard Verhalten. STATIC ist automatisch allen Elementen zugewiesen. Kein verschieben mit TOP: oder LEFT etc. ist möglich. Das Element ist im allgemeinen Fluss.
positions:relative;Ist Bezugspunkt für absolute Kinder-Elemente. Das Element ist im allgemeinen Fluss. Wird ein RELATIVE Element mit z.B. TOP: 0 verschoben, so nimmt es an seiner ursprünglichen Stelle noch Raum ein.
positions:absolute:Das Element wird aus dem allgemeine Fluss entfernt. Position bezieht sich auf relative-Eltern-Element. Verschoben mit z.B. LEFT: 0 nimmt das Element keinen Raum an seiner ursprünglichen Stelle ein. Das ABSOLUTE Elemente scrollen mit. Verschieben mit TOP, LEFT etc. ist möglich.
positions:fixed;Verhalten analog zu absolute, Element scrollt jedoch nicht mit. Es bezieht sich auf den BODY als Bezugspunkt.
z-index: 1; 5; 99; 108;ABSOLUTE und FIXED Elemente können übereinander liegen. Z-INDEX bestimmt die Reihenfolge der Schichtung. Die höchste Zahl liegt oben.

Abstand

CSSWerteBedeutung
top:-5px; 20%; 5em; 10cm (...)Oberer Abstand zum letzten relative-Eltern-Element
right:5px; -20%; (...)Rechter Abstand zum letzten relative-Eltern-Element
bottom:-5px; 20%; (...)Unterer Abstand zum letzten relative-Eltern-Element
left:-5px; 20%; (...)Linker Abstand zum letzten relative-Eltern-Element

frageantwort
Lösch im MAIN die Eigenschaft position:relativeNAV und .RED orientieren sich dann sofort am BODY
NAV soll sich am linken Rand ausrichtenleft: 5px statt right: 5px
.RED soll einen Abstand von 90px zum unteren Rand habenbottom: 90px;
NAV soll einen Abstand von 25px zum unteren Rand habenbottom: 25px;
z-index:
CSS positions

CSSWertBedeutung
positions:static;Standard Verhalten. STATIC ist automatisch allen Elementen zugewiesen. Kein verschieben mit TOP: oder LEFT etc. ist möglich. Das Element ist im allgemeinen Fluss.
positions:relative;Ist Bezugspunkt für absolute Kinder-Elemente. Das Element ist im allgemeinen Fluss. Wird ein RELATIVE Element mit z.B. TOP: 0 verschoben, so nimmt es an seiner ursprünglichen Stelle noch Raum ein.
positions:absolute:Das Element wird aus dem allgemeine Fluss entfernt. Position bezieht sich auf relative-Eltern-Element. Verschoben mit z.B. LEFT: 0 nimmt das Element keinen Raum an seiner ursprünglichen Stelle ein. Das ABSOLUTE Elemente scrollen mit. Verschieben mit TOP, LEFT etc. ist möglich.
positions:fixed;Verhalten analog zu absolute, Element scrollt jedoch nicht mit. Es bezieht sich auf den BODY als Bezugspunkt.
z-index: 1; 5; 99; 108;ABSOLUTE und FIXED Elemente können übereinander liegen. Z-INDEX bestimmt die Reihenfolge der Schichtung. Die höchste Zahl liegt oben.

Abstand zum Bezugselement

CSSWerteBedeutung
top:-5px; 20%; 5em; 10cm (...)Oberer Abstand zum letzten relative-Eltern-Element
right:5px; -20%; (...)Rechter Abstand zum letzten relative-Eltern-Element
bottom:-5px; 20%; (...)Unterer Abstand zum letzten relative-Eltern-Element
left:-5px; 20%; (...)Linker Abstand zum letzten relative-Eltern-Element

frageantwort
Das graue NAV soll über dem .RED liegenz-index von NAV muss einen höheren Wert als .RED haben. Z.B. z-index: 5;
► Weitere Infos

float-clear

Positions, Float und Clear Microsite

▼ Download der Microsite

In der Microsite ist das Zusammenspiel der Positions und z-index sowie Float mit Clear anschaulich dargestellt. Es ist hilfreich wenn Du dir die Kommentare im Quellcode ansiehst. Diese Inhalte in "Aktion" zu sehen ist eine sehr gute Ergänzung neben der Erklärung im Skript und Unterricht sowie den Editoren hier auf der CODE Plattform. Ich denke das Verständnis der Positions ist eine wichtige Grundlage für die spätere Arbeit mit Float, Multicolumn oder Flex.


Externe Quellen

Kompatibilität

Static, relative, absolute und fixed Position sowie z-index werden seit langer Zeit von den üblichen Browsern voll unterstützt.


W3C CSS Visual formatting model
9.3 Positioning schemes

http://www.w3.org/(...)positioning-scheme

Original Spezifikation der W3C für die Positions (static, relative absolute, fixed) und Box-Offsets (top, left, right, bottom).


W3C CSS Visual formatting model
9.9.1 stack level: 'z-index' property

http://www.w3.org/(...)#z-index

Original Spezifikation der W3C für die Schichtung der absoluten oder fixed Elemente mit z-index.


selfhtml.wiki

http://wiki.selfhtml.org.wiki(...)position

http://wiki.selfhtml.org/wiki(...)z-index

Ausführliche Beschreibungen in deutscher Sprache.


Webseiten ohne Tabellen gestalten

http://www.webwriting-magazin.de(...)cssebenen.shtml

Ich gebe es ja zu. Ende der 90er Jahren habe ich Webseite in erster Linie mit Tabellen gestaltet. Anfang 2000 habe ich dann auf die Positions und divs umgestellt. Ein Artikel aus dieser Zeit mit einem Tutorial.