 Elemente positionieren 01 Anzeigeort innerhalb der Seite bestimmen
Seitenelemente punktgenau mit CSS-Angaben positionieren. Dazu werden CSS-Anweisungen mit den Notierungen für 'top' und 'left' für das jeweilige Element gemacht. |
|
Seitenelemente überlagern / mit CSS positionieren
Eine Anwendung wäre z.B. die Darstellung einer kleinen Lupe über einem Vorschaubildchen als Hinweis darauf, das man das Bild zur Vergrößerung anklicken kann.
Sie ersparen sich damit die Arbeit, die Lupengrafik in jedes Vorschaubild mit einem Grafikprogramm aufwändig einzubetten.
|
|
Hier in der Erklärung wird innerhalb eines Anzeigebereichs (blauer Kasten) ein Bild an einer bestimmten Position angezeigt. Ein Text (keine transparente Grafik) überlagert das Bild. Eine solche Technik wird z.B. dann eingesetzt, wenn man wechselnde / unterschiedliche Texte über ein Foto legen möchte.
Letztes Seitenelement vor dem DIV-Bereich 'AnzeigeBox' ist dieser Text.
Ich habe zunächst für die Anzeige einen übergeordneten <div>-Bereich mit der ID 'AnzeigeBox' festgelegt und zur Demo mit einem blauen Rand versehen. Dieses Element wird relativ zum vorhergehenden Seiteninhalt mit einem Versatz von X = 0 Pixel und Y = 0 Pixel positioniert also ohne Verschiebung oder Einrückung gleich dort, wo es notiert wurde.
#AnzeigeBox {
position: relative;
top: 0px;
left: 0px;
height: 140px;
width: 540px;
}
Dieses Element 'AnzeigeBox' ist das Elternelement für die beiden untergeordneten Kindelemente 'text' und 'bild' die ich nun innerhalb der DIV-Notierung für die 'AnzeigeBox' eintragen werde.
<div id="AnzeigeBox">
hier
</div>
Der absolute X-/Y-Positionsbezug für die beiden Kindelemente (text und bild) innerhalb der 'AnzeigeBox' ist die linke obere Ecke der 'AnzeigeBox'. Diesen Punkt habe ich in der Demo oben durch einen winzigen roten Block gekennzeichnet. Die Angaben zur Positionierung der beiden Kindelemente beziehen sich auf diesen Punkt und werden mit Angaben für 'top' (von oben) und 'left' (von links) in der Maßeinheit Pixel angegeben.
Querverweis:  CSS Info - Elternelement Kindelemente
Positionierung der beiden Kindelemente mit CSS
Der <div>-Bereich 'AnzeigeBox' ist also Elternelement für die beiden Kindelemente (text + bild), die innerhalb von 'AnzeigeBox' notiert wurden. Deren X- / Y-Position wird daher absolut (in Relation zur linken oberen Ecke des Elements 'AnzeigeBox') angegeben.
Die Verschiebungen / Abstände ergeben sich gemäß der CSS-Anweisungen in Relation zur linken oberen Ecke der 'AnzeigeBox'.
Positionsbestimmung (text) mit den Koordinatenangaben top:50px und left:170px
Positionsbestimmung (bild) mit den Koordinatenangaben top:10px und left:270px
CSS-Code (Auszug):
#text {
position: absolute;
z-index: 2;
top:50px;
left:170px;
}
#bild {
position: absolute;
z-index: 1;
top:10px;
left:270px;
}
Wie Sie oben im blauen Kasten sehen, können sich solche Elemente auch überlagern. Die beiden Elemente wurden mittels CSS-Angaben horizontal und vertikal punktgenau positioniert und die Bereiche überlappen sich dabei. Die Reihenfolge der Anzeige (aus Sicht des Betrachters hintereinander) wird durch Z-Index-Angaben festgelegt.
Die Rangordnung für die Anzeige, welches Element vor oder hinter dem anderen angezeigt wird, bestimmt der 'z-index'. Die Elemente mit der höchsten Indexzahl stehen aus Sicht des Betrachters ganz vorne. Alle anderen in der Folge der Zahlen dahinter.
|
|
Ohne Z-Index-Angabe bestimmt die Reihenfolge der Notierung innerhalb des Body-Bereichs die Rangfolge bei der Überlagerung! Was zuletzt notiert wurde 'liegt obenauf'.
Aufwand
- CSS-Notierungen in den Head-Bereich kopieren
- HTML-Code für die DIV-Bereiche in den Body-Bereich notieren
Das Modul mit sämtlichen Dateien können sie als ZIP-Datei herunterladen.
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel dem Quellcode-Listing unten. Oben im Kopfbereich können Sie eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum Thema CSS finden Sie im  CSS Untermenü 01 oder gezielt zur Kaskadierung auf der Seite Info Kaskadierung (weitere Links im Fußbereich).
Alles Notwendige ist getan!
Das war's schon! Lassen Sie sich von den langen Erklärungen hier nicht abschrecken und führen die oben aufgelisteten Schritte durch. Am Einfachsten ist es, die ZIP-Datei herunter zu laden und zu entpacken. Grafik und eine Demo-Datei haben Sie dann bereits auf Ihrer Festplatte und Sie können ein wenig experimentieren.
Falls Sie dann das Modul 'Elemente positionieren 02' anpassen möchten, weitere Erklärungen benötigen oder mehr über die Funktionsweise erfahren möchten, lesen Sie den betreffenden Abschnitt unten.
CSS im Head-Bereich
In der CSS-Notierung steht für die Zuordnung der Eigenschaften der beiden Kindelemente der Identifikator #text für die Textbox und der Identifikator #bild für die Bildbox.
<style type="text/css">
<!--
#AnzeigeBox {
position: relative;
top: 0px;
left: 0px;
height: 140px;
width: 540px;
border:1px solid #00AFFF
}
#text {
position: absolute;
z-index: 2;
top: 50px;
left: 170px;
}
#bild {
position: absolute;
z-index: 1;
top: 10px;
left: 270px;
}
-->
</style>
Für die Beiden Boxen #text und #bild könnte man weitere Eigenschaften wie Höhe und Breite oder für die Textbox zusätzliche Angaben zur Textformatierung festlegen.
Notierung der Elemente im Body-Bereich
Die darzustellenden Kindelemente (Text und Bild) sind innerhalb des mit <div>-Angaben definierten Anzeigebereichs (AnzeigeBox) notiert. Allen <div>-Bereichen wurde ein Identifikator zugeordnet, mit dem der Bezug zu den CSS-Notierungen hergestellt wird. Für die Anzeibebox mit "id="AnzeigeBox", für den Text mit id="text" und für das Bild mit id="bild".
<div id="AnzeigeBox">
<div id="text">
<span style="color:#7F7F7F;font-size:24px;">Wintersport</span>
</div>
<div id="bild">
<img src="foto.jpg" width="150" height="112" border="0" alt="">
</div>
</div>
Einsatzbereiche
|
So erhält man mit CSS schöne Darstellungen und man kann manchmal auf eine Grafik verzichten. Das erhöht unter Umständen die Ladegeschwindigkeit der Datei. Die Darstellung rechts kann man mit einer Grafik, aber ebenso mit CSS erzielen.
|
|
Einen weiteren Einsatzbereich findet man im dymamischen HTML (DHTML). Dabei werden z.B. Seitenelemente bewegt.
Die X- / Y-Position dieser Elemente ist durch den Abstand von oben und links festgelegt!
Diese X- / Y-Angaben (in Pixel) kann man durch JavaScript neu berechnen lassen und danach eine Aktualisierung der Anzeige auslösen. Nach der Aktualisierung würde das Element dann an einer anderen Position angezeigt werden.
CSS Positionierung 02 - Texte positionieren absolut + relativ
CSS Positionierung relativ - Schlagschatten 02
CSS Positionierung absolut - Schlagschatten 01
CSS Info - Elternelement Kindelemente
|
Home • CSS • Elemente überlagern
BEISPIEL
Download
Demo: Unterschied ansehen, absolute / relative Positionierung