Mitschrift 02.05.2014
TAG 18Positioning (absolutes Positionieren)
grundsätzlich positionieren wir mit CSS standardmäßig absolut. (=default)
Datei: ap-01.html
Quelltext:
<!doctype html>
<html>
<head>
<title>Absolute Positionieren</title>
<meta name="author" content="Michael Sewelies">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
* {margin: 0;}
#eins, #zwei, #drei, #vier {height: 150px; width: 150px;}
#eins {background: #DF0000;}
#zwei {background: #FFFF00;}
#drei {background: #007F00;}
#vier {background: #0000FF;}
</style>
</head>
<body >
<div id="eins"></div>
<div id="zwei"></div>
<div id="drei"></div>
<div id="vier"></div>
</body>
</html>
Ausgabe:
#eins {background: #DF0000;} = Anstatt background-color auszuschreiben, reicht auch background
=> position: absolute;
Datei: ap-02.htmlUnterschied zu der ersten Datei: CSS-Angabe:
#eins, #zwei, #drei, #vier {position: absolute;}
Absolute Positionsangaben gehen immer vom Browserrand oben, unten, rechts und links in px aus!
Quelltext:
<!doctype html>
<html>
<head>
<title>Absolute Positionieren</title>
<meta name="author" content="Michael Sewelies">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
* {margin: 0;}
#eins, #zwei, #drei, #vier {
height: 150px;
width: 150px;
position: absolute;
}
#eins {background: #DF0000;}
#zwei {background: #FFFF00;}
#drei {background: #007F00;}
#vier {background: #0000FF;}
</style>
</head>
<body >
<div id="eins"></div>
<div id="zwei"></div>
<div id="drei"></div>
<div id="vier"></div>
</body>
</html>
Ausgabe:
 |
| position: absolute; |
-> alles scheint zusammengerutscht zu sein!
Regel:
position: absolute; - hat folgende Wirkung: Die absolute Positionierung ohne Positionsangaben meint immer top:0 & left: 0!!! (=default)
-> nur noch der letzte (hier der blaue) Container ist sichtbar! Sie liegen übereinander
 |
| default ohne Positionsangaben: top=0 & left = 0 |
Quelltext:
<!doctype html>
<html>
<head>
<title>Absolute Positionieren</title>
<meta name="author" content="Michael Sewelies">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
* {margin: 0;}
#eins, #zwei, #drei, #vier {
height: 150px;
width: 150px;
position: absolute;}
#eins {background: #DF0000; left: 0; top: 0;}
#zwei {background: #FFFF00; left: 50px; top: 50px;}
#drei {background: #007F00; left: 100px; top: 100px;}
#vier {background: #0000FF; left: 150px; top: 150px;}
</style>
</head>
<body >
<div id="eins"></div>
<div id="zwei"></div>
<div id="drei"></div>
<div id="vier"></div>
</body>
</html>
Ausgabe:
Absolut heißt mit Positionsangaben: bspw. der gelbe div-Container bleibt immer 50px vom oberen und linken Browserrand entfernt stehen!
Regel: Überlagerung: Ich kann schichten übereinanderlegen - somit ist die natürliche Reihenfolge der Elemente elementar wichtig!
-> Überlagung immer in der natürlichen Reihenfolge der Elemenete im Quelltext
 |
| Hier hab ich mal selbst rumprobiert :) |
Überlagerung möglich, was über das Boxmodell nicht möglich ist.
Beispiel von css4you
 |
| Beispiel absolutes Positionieren |
Vorteil vom absoluten Postionieren: Keine Auswirkungen auf nachfolgende Elemente!
Regel: absolut positionierte Elemente immer ans Ende des Quelltextes schreiben: Warum? Damit es uns nicht das gesamte Layout zerschießt, wenn die CSS-Angabe des absoluten Positionierens aus irgendeinem Grund nicht greift!
Am Ende des Quelltextes die absolut zu positionierenden Elemente einbauen!
Neue Positionierungsmöglichkeit rein über Koordinaten! Nicht mehr das klassische Inlineelement
Datei: ap-05.html
relevanter Quelltextauszug:
#eins, #zwei, #drei, #vier {
height: 150px;
width: 150px;
position: absolute;}
#eins {background: #DF0000; left: 0; top: 0;}
#zwei {background: #FFFF00; right: 0; top: 0;}
#drei {background: #007F00; right: 0; bottom: 0;}
#vier {background: #0000FF; left: 0; bottom: 0;}
in der natürlichen Reihenfolge liegt der Text zwar vor den Elementen mit der absoluten Positionieren - Es findet aber eine Überlappung statt, bei der sich die Absolut positionierten Elemente an die Stelle stellen, an der sie positioniert wurden und überlagern eben auch in diesen Bereichen den Text.
Wenn wir jetzt die width der farbigen Elemente verändern, schieben sie sich wie ein Vorhang über den Text.
Anwendungsbeispiel: Menüleiste, wie angenagelt / fixiert:
Wenn ich scrolle, bleobt das Element immer an der gleichen Stelle stehen!
Teaser, Werbebanner, Übergelagerte Fenster...
Problem: Sobald wir den Inhaltsausschnitt ändern (also, wenn unser Inhalt wächst und wir können rechts im Inhalt scrollen), läuft unser schwarzer Balken leider nicht mir :(
ERGO: Die Darstellung ist abhängig vom momentanen Browserfensterstatus beim Öffnen!
Das ist nicht immer toll! Um diesen Effekt zu verhindern, gibt es:
=> position: fixed;
Beispiel von CSS4youBei dieser Positionsangabe bleibt das Element immer an dieser Position fixiert!
Auch wenn wir den Inhaltsausschnitt des Browserfensters verändern oder scrollen!
ERGO:
Die Regelwerke bei abolute und fixed sind ähnlich - es geht immer um die Positionierung vom Seitenrand, nur ist der Inhaltsausschnitt des Browserfensters beim Öffnen wichtig bei absolute - bei fixed nicht.
Datei: ap-07.html
Beispiel, wie man Text zwischen absolut positionierten Containern darstellen kann!
Quelltext:
#eins, #zwei, #drei, #vier {
height: 150px;
width: 150px;
position: absolute;}
#eins {background: #DF0000; left: 0; top: 0;}
#zwei {background: #FFFF00; right: 0; top: 0;}
#drei {background: #007F00; right: 0; bottom: 0;}
#vier {background: #0000FF; left: 0; bottom: 0;;}
#inhalt {padding: 0 170px; text-align: justify;}
Ausgabe:
 |
| Bild zwischen absolut positionierten Cointainern, durch den Innenabstand rechts und links erhalten |
Exkurs:
Hinweis zur Reihenfolge im CSS-Quelltext:
die Reihenfolge der Selektoren in den CSS-Angaben ist dann ausschlaggebend, wenn es sich um gleiche Selektoren handelt. Heißt, wenn zwei ID-Selektoren untereinander stehen, wird der Wert des ersten ID-Selektors überschrieben.
Sollte erst ein ID-Selektor und dann ein Klassenselektor in den CSS-Angaben stehen, überschreibt der geringerwertige Klassenseletor den ID-selektor nicht! Die Höherwertigkeit des ID-Selektors bleibt von der Reihenfolge unberührt!
weiter mit den Dateien reihenfolge01.html-reihenfolge06.html:
reihenfolge01: Ausgangsposition
Manipulation der natürlichen Reihenfolge der Elemente im Quelltext
z-index = neue Achse:zu der x- und y-Achse, nehmen wir die z-Achse hinzu - Also ÜberlappungsAchse - Layer oder Schicht genannt!
z-index bei css4you
jetzt setzen wir ein weitere Attribut in den div3: z-index: 1;
Mit Hilfe dieses Attributes können wir den dritten div (grün) in den Vordergrund stellen (die Wichtigkeit der Hierarchischen Reihenfolge im Quelltext wird von z-index dominiert!
z-index:
- ist immer nummerisch (ab 1 - mit steigernder Wertigkeit)
- beschreibt die Reihenfolge
- je höher der z-index, desto höher liegt die Schicht
Wir können jetzt den Grünen nach vorne holen:
#drei {
background: none repeat scroll 0 0 #007F00;
left: 100px;
top: 100px;
z-index: 4;
}
 |
| grüner div: z-index: 3 - also überlappt er alle anderen! |
wir können auch im Minusbereich des z-index arbeiten:
2 Anwendungsgründe:
- Der negative z-index ist sehr sinnvoll, wenn ich nachträglich Schichten weiter nach unten lappen möchte, dann kann ich auch ins negative gehen
- mit den Minus-Indizes kann ich auch Wasserzeichen herstellen
- <div id="wasserzeichen">wunder<br />schön</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque pe... - z-index: -1;
- opacity: 0.3; (Transparenz)
Relatives Positionieren
css4you Link zum relativen Positionieren=> position: relative;
Ermöglicht das absolute Positionieren von Kindelementen relativ zu ihren Elternelementen.Also muss ich das position: relative; im Selektor des Elternelementes angeben!
Das relative Positionieren kommt nur dann zum Tragen, wenn das Element auch ein Kind-Elemente hat, welches ich absolut positioniere!!!
Ergo muss die Eltern-Kind-Beziehung bereits in der HTML-Struktur berücksichtigt worden sein! (relative Positionierungen kann man nicht nachträglich im CSS formatieren, wenn im HTML diese Struktur nicht eingebaut wurde.)
Datei: rp1.html
Quelltext:
<!doctype html>
<html>
<head>
<title>Positionieren von Ebenen</title>
<style type="text/css">
* {margin:0;}
html {height: 100%;}
body {height: 100%;}
#eins {
width: 150px; height: 150px; position: absolute; background-color: #FF7F00; top: 0; left: 0;}
#zwei {width: 150px;height: 150px; position: absolute;background-color: #9000E0; top: 0; right: 0;}
#drei {width: 150px;height: 150px; position: absolute;background-color: #005F00; bottom: 0; left: 0;}
#vier {width: 150px;height: 150px; position: absolute;background-color: #5F0000; bottom: 0; right: 0;}
#leinwand {
width: 800px;
margin: auto;
background-color: #eee;
position: relative;
/* Ermöglicht das absolute Positionieren von Kindelementen relativ zu ihren Elternelementen */
min-height: 100%;}
</style>
<meta charset="utf-8">
</head>
<body >
<div id="leinwand">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu
<div id="eins"></div>
<div id="zwei"></div>
<div id="drei"></div>
<div id="vier"></div>
</div>
</body>
</html>
Relative Positionierung zur Leinwand!
(absolut = absolut zur Browserkante vs relativ = andere div-Container als Maß, an dem ausgerichtet wird)Also ausgehend von der inneren Leinwand die bunten div-Container positioniert bekommen...
 |
| absolut positioniert zur Browserkante |
 |
| relativ positioniert zum Leinwand-Container |
- farbige Div-Container sind jetzt relativ zur Leinwand positioniert
- farbige Div-Container sind jetzt relativ zur Leinwand, aber absolut positioniert!!!
Blau: Seite/Browserfenster
Grün: Container
orange: weiterer Container
und 2 Spalten
und weiteres Logo im Hintergrund...
Jetzt hört es auf, mit float, jetzt lohnt es sich relative Positionierung anzuwenden!
Irgendwann hilft uns das floaten nicht mehr weiter, weil es eben auch die Folgeelemente betrifft, gerade dann macht relatives Positionieren Sinn! :)
ERGO: Aufgabenangemessen setzen wir somit float, position etc. ein!
ODER: Anwendnungsbeispiel2:
Aufgabe: innerhalb eines Containers immer am Fuß eine Infozeile zu setzen! Und die Höhe des Containers variiert, dann müssen wir mit Positioning arbeiten!
3. Anwendungsbeispiel:
Link
hier wurde versucht mithilfe von Tabellen eine Hintergrundgrafik zu erstellen. Leider reagiert sie nicht responsive :(
Eine elegantere Lösung wäre gewesen ein Elternelement zu setzen und dann Kindelemente einzufügen, die sich an dem Elternelement ausrichten.
 |
| repsonsive Grafik bauen mithilfe von relativer Positionierung |
 |
| Social bar => in roten Elipsen |
Hinweis: Im HTML-Kurs-Ordner Tag 15 gibt es mehr zum Thema Navigationen und Positionierung
Vorschau auf nächste Woche:
Am Montag gehen wir nochmal die Klausurthemen durch.
Keine Kommentare:
Kommentar veröffentlichen