[CSS] Layers

[Zerogiven]

Ein Layer ist nichts weiter als eine frei verschiebbare Rahmenkonstruktion, also eine leere Hülle. Das witzige ist, das man mittels CSS mit fast allen HTML Elementen solche Layer machen kann.
Das einzige Problem ist wie immer die Browserkompatibilität, da ältere Browser damit nichts anfangen können. Trotzdem ist es möglich bereits jetzt mit dem Einsatz von Layern zu arbeiten. Die Funktionalität von Layern ist mit ein bisschem CSS wissen schnell durchschaubar, wenn wir uns mal ein Beispiel Layer ansehen:

Code:

<div id="Layer1" style="border:1px solid black; position:absolute; width:200px; height:100px; z-index:1; background-color:#FFFF00;"></div>

Nun eine kurze Erläuterung dazu:

border:1px solid black; = Wir machen einen Rahmen rund um den Layer

position: absolute; = Mit position können Sie die Positionsart bestimmen
absolute : absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.
fixed : absolute Positionierung, gemessen am Rand des Elternelements. Bleibt beim Scrollen stehen.
relative : relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static : keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).

width:...; height:...; = Höhe und Breite des Layers gemessen in pc (Pica), pt (Punkt), in (Inch), mm (Millimeter), cm (Zentimeter) oder % (Prozentsatz vom Wert des übergeordneten Elements)

z-index:1; = Diese Angabe ist sinnvoll in Verbindung mit mehreren Layern, da sich hier die Sichtposition einzelner Layer bestimmen lässt

background-color:...; = Angabe zur Hintergrundfarbe von Layern

So, damit der Layer aber auch dort angezeigt wird, wo wir wollen, können wir nun Angaben zur Positionierung machen. Dies machen wir wieder mit CSS Befehlen. Die Angaben können genauso wie bei der Höhen/Breiten Angabe gemacht werden. Folgende Befehle können verwendet werden:

top:...; = Positionierung vom oberen Rand des Browsers
left:...; = Positionierung vom linkem Rand des Browsers
right:...; = Positionierung vom rechtem Rand des Browsers
bottom:...; = Positionierung vom unterem Rand des Browsers

Ein fertiger Layer könnte nun so aussehen:

Code:

<div id="Layer1" style="position:absolute; width:200px; height:100px; z-index:1; top:50px; left:50px; border:1px dotted black; background-color:#FFFFFF;">Dies ist ein Layer mit Text</div>

Hier habe ich noch eine DEMO Seite, wo sich 2 Layer überschneiden:
LINK

So, ich wünsch euch viel Spass damit

mfg
Zerogiven

© by http://www.boldluck.at