DHTML CSS Positioning (CSS-P)

CSS wird verwendet, um Stile für HTML-Elemente hinzuzufügen.

Beispiel

Anmerkung:Die meisten DHTML-Beispiele erfordern IE 4.0+、Netscape 7+ oder Opera 7+!

position:relative
Wie wird dieses Element relativ zu seiner normalen Position positioniert.
position:relative
Wie werden alle Überschriften relativ zu ihrer normalen Position positioniert.
position:absolute
Wie wird ein Element mit einem absoluten Wert definiert.

Mehrere Beispiele finden Sie weiter unten auf der Seite.

Welche Attribute können mit CSS-P verwendet werden?

Zunächst muss dieses Element das Attribut 'position' (relative oder absolute) angegeben haben.

Dann kann ich die folgenden CSS-P-Eigenschaften einstellen:

  • left - Position der linken Kante des Elements
  • top - Position der Oberkante des Elements
  • visibility - Bestimmen Sie, ob ein Element sichtbar oder versteckt sein soll
  • z-index - Stapelreihenfolge der Elemente
  • clip - Elementbeschnitt
  • overflow - Wie wird überflüssiges Inhalt behandelt

Position

Das Attribut 'position' in CSS ermöglicht es Ihnen, die Position eines Elements im Dokument zu steuern.

position:relative

Das Attribut 'position:relative' platziert ein Element basierend auf seiner aktuellen Position.

Das folgende Beispiel platziert diesen div-Element 10 Pixel rechts von seiner normalen Position.

div
{
position:relative;
left:10;
}

position:absolute

Das Attribut 'position:absolute' platziert ein Element basierend auf dem Abstand zum Fensterrand des Margins.

Das folgende Beispiel platziert diesen div-Element 10 Pixel rechts vom rechten Rand des Margins seines umschließenden Blocks.

div
{
position:absolute;
left:10;
}

Sichtbarkeit

Das Attribut 'visibility' bestimmt, ob ein Element sichtbar oder unsichtbar sein soll.

visibility:visible

Das Attribut 'visibility: visible' macht ein Element sichtbar.

h1
{
visibility:visible;
}

visibility:hidden

Das Attribut 'visibility: hidden' macht ein Element unsichtbar.

h1
{
visibility:hidden;
}

Z-index

Das Attribut 'z-index' wird verwendet, um ein Element hinter einem anderen zu platzieren. Der Standardwert von 'z-index' ist 0. Je höher der Wert, desto höher ist die Priorität. 'z-index: -1' hat eine niedrigere Priorität.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

Im obigen Beispiel wird der h2-Element unterhalb des h1-Elements positioniert, wenn beide sich überlappen.

Filters

Das Attribut 'filter' ermöglicht es Ihnen, zusätzliche Stileffekte für Text und Bilder hinzuzufügen.

h1
{
width:100%;
filter:glow;
}

Anmerkung:Um den Filter-Attribute zu verwenden, müssen Sie immer die Breite des Elements angeben.

Die obigen Beispiele erzeugen den folgenden Ausgang:

Header

Verschiedene Filter

Anmerkung:Einige Filter-Eigenschaften funktionieren möglicherweise nicht, es sei denn, die Eigenschaft background-color ist auf transparent gesetzt!

Eigenschaft Parameter Beschreibung Beispiel
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 Ermöglicht es Ihnen, die Transparenz des Elements zu setzen 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 Darf Elemente verschwommen darstellen 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color Darf die angegebene Farbe transparent machen 
filter:chroma(
color=#ff0000)
fliph none Darf Elemente horizontal umkehren filter:fliph;
flipv none Darf Elemente vertikal umkehren filter:flipv;
glow
  • color
  • strength
 Darf Elemente leuchten 
filter:glow(
color=#ff0000,
strength=5);
gray none Darf Elemente in Schwarzweiß darstellen filter:gray;
invert none Darf Elemente mit invertierten Farben und Helligkeitswerten darstellen filter:invert;
mask color Darf Elemente mit angegebenem Hintergrundfarbe und transparentem Vordergrundfarbe darstellen 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 Darf Elemente mit Schatten darstellen 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 Darf Elemente mit Schatten darstellen 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 Darf die Elemente als Wellenform darstellen 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Verwenden Sie Schwarzweiß, um Elemente mit invertierten Farben und Helligkeitswerten anzuzeigen filter:xray;

Hintergrund

Die background-Eigenschaft ermöglicht es Ihnen, Ihren eigenen Hintergrund auszuwählen.

background-attachment:scroll

Der Hintergrund bewegt sich mit der Seite.

background-attachment:fixed

Der Hintergrund bewegt sich nicht mit der Seite.

Mehr Beispiele

Sichtbarkeit
Wie kann ein Element unsichtbar gemacht werden. Möchten Sie, dass dieses Element angezeigt wird oder nicht?
Z-index
Z-index kann verwendet werden, um ein Element hinter ein anderes zu platzieren, indem die Z-index-Reihenfolge verwendet wird.
Z-index
Sehen Sie sich an, die Z-index-Reihenfolge des Elements hat sich geändert.
Cursors
Verwenden Sie CSS, um den Stil des Mauszeigers zu ändern.
Filters
Verwenden Sie die filter-Eigenschaft, um den Stil der Überschriften zu ändern.
Filters auf Bildern
Die filter-Eigenschaft kann auch auf Bilder angewendet werden, hier sind einige Beispiele von Bildern, die die filter-Eigenschaft verwenden.
Wasserzeichen
Hintergrundbilder, die beim Scrollen der Seite nicht verschoben werden.