DHTML CSS Positioning (CSS-P)

CSS används för att lägga till stilar till HTML-element.

Exempel

Kommentar:De flesta DHTML-exempel kräver IE 4.0+、Netscape 7+ eller Opera 7+!

position:relative
Hur positionerar man detta element relativt dess normala position?
position:relative
Hur positionerar man alla rubriker relativt deras normala position?
position:absolute
Hur definierar man en element med en absolut värde?

Du kan hitta fler exempel längre ner på sidan.

Vilka attribut kan användas tillsammans med CSS-P?

Först måste detta element specificera position-attributet (relative eller absolute).

Då kan jag ställa in följande CSS-P-attribut:

  • left - elementets vänsterposition
  • top - elementets toppposition
  • visibility - specificera om ett element ska vara synligt eller dolt
  • z-index - elementets staplingsordning
  • clip - elementbeskärning
  • overflow - hur man hanterar överskridande innehåll

Position

CSS position-attributet låter dig kontrollera positionen för ett element i dokumentet.

position:relative

position:relative-attributet kan användas för att placera detta element baserat på dess nuvarande position.

Följande exempel placerar denna div-elementet 10 pixlar till höger för dess normala position:

div
{
position:relative;
left:10;
}

position:absolute

position:absolute-attributet placerar ett element baserat på dess margin till fönstret.

Följande exempel placerar denna div-elementet 10 pixlar till höger för dess inneslutande blockmarginal:

div
{
position:absolute;
left:10;
}

Synlighet

visibility-attributet bestämmer om ett element är synligt eller inte.

visibility:visible

visibility:visible-attributet gör elementet synligt.

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden-attributet gör elementet osynligt.

h1
{
visibility:hidden;
}

Z-index

z-index-attributet används för att placera en element efter en annan. z-index standardvärde är 0. Ju högre värde, desto högre prioritet. z-index: -1 har lägre prioritet.

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

I det föregående exemplet, om h1 och h2 överskrider varandra, kommer h2-elementet att ligga ovanpå h1.

Filter

Filter egenskapen låter dig lägga till fler stilverkningar till text och bild.

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

Kommentar:För att använda filter-egenskapen måste du alltid specificera elementets bredd.

Ovanstående exempel genererar följande utdata:

Rubrik

Olika filter

Kommentar:För att vissa Filter-egenskaper ska fungera korrekt måste background-color-egenskapen inte vara satt till transparent!

egenskaper parametrar beskrivning exempel
alpha
  • genomskinlighet
  • slutlig genomskinlighet
  • stil
  • startx
  • starty
  • finishx
  • finishy
 tillåter dig att ställa in elementets genomskinlighet 
filter:alpha(
genomskinlighet=20,
slutlig genomskinlighet=100,
stil=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • riktning
  • styrka
 sudda elementet 
filter:blur(
add=true,
riktning=90,
styrka=6);
chroma färg gör angiven färg genomskinlig 
filter:chroma(
färg=#ff0000)
fliph none vänd elementet horisontellt filter:fliph;
flipv none vänd elementet vertikalt filter:flipv;
glow
  • färg
  • styrka
 gör elementet lysande 
filter:glow(
färg=#ff0000,
styrka=5);
gray none visualisera element i svart och vitt filter:gray;
invert none visualisera element med omvända färger och ljusstyrkor filter:invert;
mask färg visualisera element med angiven bakgrundsfärg och genomskinlig förgrundsfärg 
filter:mask(
färg=#ff0000);
skugga
  • färg
  • riktning
 visualisera element med skugga 
filter:shadow
(färg=#ff0000,
riktning=90);
dropshadow
  • färg
  • offx
  • offy
  • positiv
 visualisera element med skugga 
filter:dropshadow
(färg=#ff0000,
offx=5,
offy=5,
positiv=true);
våg
  • add
  • frekvens
  • ljusstyrka
  • faza
  • styrka
 visualisera element som vågformad 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Visa element med omvänd färg och ljusstyrka i svart och vitt. filter:xray;

Bakgrund

Background-attributet låter dig välja din egen bakgrund.

background-attachment:scroll

Bakgrunden rör sig när sidan rullar.

background-attachment:fast

Bakgrunden rör sig inte när sidan rullar.

Mer exempel

Synlighet
Hur gör jag en element osynlig. Vill du att elementet ska visas eller inte?
Z-index
Z-index kan användas för att placera en element efter ett annat element, genom att använda Z-index-komposition.
Z-index
Se, elementets Z-index-komposition har ändrats.
Muspekare
Ändra muspekarens stil med CSS.
Filter
Använd filter-attribut för att ändra stilen på rubriker.
Filter på bilder
filter-attribut kan också tillämpas på bilder, här är några exempel på bilder som har tillämpats filter-attribut.
Vattenstämpel
Bakgrundsbilden rör sig inte när sidan rullar.