DHTML CSS Positioning (CSS-P)

CSS bruges til at tilføje stilarter til HTML-elementer.

Eksempel

Bemærk:De fleste DHTML-eksempler kræver IE 4.0+、Netscape 7+ eller Opera 7+!

position:relative
Hvordan placerer man dette element relativt til dens normale position?
position:relative
Hvordan placerer man alle overskrifter relativt til deres normale position?
position:absolute
Hvordan definerer man en element med en absolut værdi?

Du kan finde flere eksempler nedenfor på siden.

Køre ejegenskaber kan bruges sammen med CSS-P?

Først skal dette element have en position-ejegenskab specificeret (relative eller absolute).

Dernæst kan jeg konfigurere følgende CSS-P-ejegenskaber:

  • left - elementets venstre position
  • top - elementets øverste position
  • visibility - specificer om et element skal være synligt eller skjult
  • z-index - elementets stakning
  • clip - elementbeskæring
  • overflow - hvordan håndtere overstrømmende indhold

Position

CSS's position-ejegenskab lader dig kontrollere placeringen af et element i dokumentet.

position:relative

position:relative-ejegenskaben kan bruges til at placere dette element i forhold til dens nuværende position.

Følgende eksempel placerer denne div-element til højre for dens normale position med 10 pixels:

div
{
position:relative;
left:10;
}

position:absolute

position:absolute-ejegenskaben placerer et element baseret på dens margin til vinduet.

Følgende eksempel placerer denne div-element til højre for dens margin til indholdet af blokken med 10 pixels:

div
{
position:absolute;
left:10;
}

Visibility

visibility-ejegenskaben bestemmer, om et element skal være synligt eller skjult.

visibility:visible

visibility:visible-ejegenskaben gør elementet synligt.

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden-ejegenskaben gør elementet usynligt.

h1
{
visibility:hidden;
}

Z-index

z-index-ejegenskaben bruges til at placere en element efter en anden. z-index's standardværdi er 0. Jo højere værdi, jo højere prioritet. z-index: -1 har lavere prioritet.

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

I det ovenstående eksempel vil h2-elementet ligge oven på h1, hvis de overlapper hinanden.

Filters

Filter-ejegenskaben lader dig tilføje flere stilEffekter til tekst og billeder.

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

Bemærk:Hvis du skal bruge filter egenskaben, skal du altid specificere elementets bredde.

De ovenstående eksempler producerer følgende output:

Header

forskellige filtre

Bemærk:Undtagen hvis background-color egenskaben er sat til transparent, vil nogle Filter egenskaber ikke fungere!

egenskab parametre beskrivelse eksempel
alpha
  • gennemsigtighed
  • afslutningsgennemsigtighed
  • stil
  • startx
  • starty
  • afslutningx
  • afslutningy
 lader dig indstille elementets gennemsigtighed 
filter:alpha(
gennemsigtighed=20,
afslutningsgennemsigtighed=100,
stil=1,
startx=0, 
starty=0,
afslutningx=140,
afslutningy=270)
blur
  • add
  • retning
  • styrke
 gør elementet sløret 
filter:blur(
add=true,
retning=90,
styrke=6);
chroma farve gør angivet farve gennemsigtig 
filter:chroma(
farve=#ff0000)
fliph none loddret omvendt element filter:fliph;
flipv none vandret omvendt element filter:flipv;
glow
  • farve
  • styrke
 gør elementet lysende 
filter:glow(
farve=#ff0000,
styrke=5);
gray none vis elementer i sort-hvidt filter:gray;
invert none vis elementer med omvendt farve og lysstyrke filter:invert;
mask farve vis elementer med angivet baggrundsfarve og gennemsigtig forgrundsfarve 
filter:mask(
farve=#ff0000);
skygge
  • farve
  • retning
 vis elementer med skygge 
filter:shadow
(farve=#ff0000,
retning=90);
dropshadow
  • farve
  • offx
  • offy
  • positiv
 vis elementer med skygge 
filter:dropshadow
(farve=#ff0000,
offx=5,
offy=5,
positiv=true);
bølge
  • add
  • freq
  • lysstyrke
  • fase
  • styrke
 vis elementer som bølger 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Vis elementer med reverseret farve og lysstyrke i sort og hvid. filter:xray;

Background

Background-egenskaben giver dig mulighed for at vælge din egen baggrund.

background-attachment:scroll

Baggrunden ruller med siden.

background-attachment:fixed

Baggrunden ruller ikke med siden.

Flere eksempler

Visibility
Hvordan gør man et element usynligt. Vil du vise dette element eller ikke?
Z-index
Z-index kan bruges til at placere et element bag et andet element, ved at bruge Z-index rækkefølgen.
Z-index
Se her, elementets Z-index rækkefølge er ændret.
Cursors
Ændr musepegelets stil ved hjælp af CSS.
Filters
Brug filter-egenskaben til at ændre titlens stil.
Filters på billeder
Filter-egenskaben kan også anvendes på billeder, her er nogle billeder, der allerede har anvendt filter-egenskaben.
Vandmærke
Baggrundsbilledet bevæger sig ikke, når siden rulles.