DHTML CSS Positioning (CSS-P)

CSS wordt gebruikt om stijlen toe te voegen aan HTML-elementen.

Voorbeeld

opmerking:De meeste DHTML-exempelen vereisen IE 4.0+、Netscape 7+ of Opera 7+!

position:relative
Hoe een element te positioneren ten opzichte van zijn normale positie.
position:relative
Hoe alle titels relatief te positioneren ten opzichte van hun normale positie.
position:absolute
Hoe een element te definiëren met een absoluut waarde.

U kunt meer voorbeelden vinden onderin de pagina.

Welke eigenschappen kunnen samen met CSS-P worden gebruikt?

Eerst moet het element de position-eigenschap (relative of absolute) hebben gespecificeerd.

Dan kan ik de volgende CSS-P-eigenschappen instellen:

  • left - de positie van de linkerkant van het element
  • top - de positie van de top van het element
  • visibility - element zichtbaar of verborgen maken
  • z-index - het stapelen van elementen
  • clip - elementen bijsnijden
  • overflow - hoe omgaan met overloopende inhoud

Position

De position-eigenschap van CSS laat u bepalen hoe een element in het document geplaatst moet worden.

position:relative

De position:relative-eigenschap kan worden gebruikt om een element te positioneren ten opzichte van de huidige positie van een element.

Het volgende voorbeeld plaatst deze div-element op een positie 10 pixels aan de rechterkant van zijn normale positie:

div
{
position:relative;
left:10;
}

position:absolute

De position:absolute-eigenschap plaatst een element op een positie op basis van de margin ten opzichte van het venster.

Het volgende voorbeeld plaatst deze div-element op een positie 10 pixels aan de rechterkant van de margin van zijn omvattende blok:

div
{
position:absolute;
left:10;
}

Zichtbaarheid

De visibility-eigenschap bepaalt of een element zichtbaar moet zijn.

visibility:visible

De visibility:visible-eigenschap maakt een element zichtbaar.

h1
{
visibility:visible;
}

visibility:hidden

De visibility:hidden-eigenschap maakt een element onzichtbaar.

h1
{
visibility:hidden;
}

Z-index

De z-index-eigenschap wordt gebruikt om een element achter een ander element te plaatsen. De standaardwaarde van z-index is 0. Hoe hoger de waarde, hoe hoger de prioriteit. z-index: -1 heeft een lagere prioriteit.

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

In het bovenstaande voorbeeld, als h1 en h2 elkaar overlappen, bevindt de h2-element zich bovenop de h1.

Filters

De filter-eigenschap laat u meer stijleffecten toe te voegen aan tekst en afbeeldingen.

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

opmerking:bij het gebruik van de filter-eigenschap, specificeer altijd de breedte van het element.

de bovenstaande voorbeelden produceren de volgende uitvoer:

kop

verschillende filters

opmerking:tenzij de eigenschap background-color op transparent is ingesteld, zullen sommige Filter-eigenschappen mogelijk niet werken!

eigenschap parameter beschrijving voorbeeld
alpha
  • doorzichtheid
  • einddoorzichtheid
  • stijl
  • startx
  • starty
  • eindx
  • eindy
 staat u toe de doorschijnendheid van het element in te stellen 
filter:alpha(
doorzichtheid=20,
einddoorzichtheid=100,
stijl=1,
startx=0, 
starty=0,
eindx=140,
eindy=270)
blur
  • add
  • richting
  • sterkte
 maak elementen wazig 
filter:blur(
add=true,
richting=90,
sterkte=6);
chroma kleur maak de gespecificeerde kleur doorzichtig 
filter:chroma(
kleur=#ff0000)
fliph none horizontaal omkeren van elementen filter:fliph;
flipv none verticaal omkeren van elementen filter:flipv;
glow
  • kleur
  • sterkte
 maak elementen gloedend 
filter:glow(
kleur=#ff0000,
sterkte=5);
gray none weergeef elementen in zwart-wit filter:gray;
invert none weergeef elementen met omgekeerde kleur en helderheidswaarden filter:invert;
mask kleur weergeef elementen met gespecificeerde achtergrondkleur en doorzichtig voorgrondkleur 
filter:mask(
kleur=#ff0000);
schaduw
  • kleur
  • richting
 weergeef elementen met schaduw 
filter:shadow
(kleur=#ff0000,
richting=90);
dropshadow
  • kleur
  • offx
  • offy
  • positief
 weergeef elementen met schaduw 
filter:dropshadow
(kleur=#ff0000,
offx=5,
offy=5,
positief=true);
wave
  • add
  • freq
  • lichtsterkte
  • fase
  • sterkte
 weergeef elementen in golfvorm 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Gebruik zwart-wit om elementen met omgekeerde kleur- en helderheidswaarden weer te geven filter:xray;

Achtergrond

De background-eigenschap staat u toe om uw eigen achtergrond te kiezen.

background-attachment:scroll

De achtergrond beweegt mee met de pagina scrolt.

background-attachment:fixed

De achtergrond beweegt niet mee met de pagina scrolt.

Meer Voorbeelden

Zichtbaarheid
Hoe een element onzichtbaar te maken. Wil je dat dit element wordt weergegeven of niet?
Z-index
Z-index kan worden gebruikt om een element achter een ander element te plaatsen, door de Z-index volgorde te gebruiken.
Z-index
Kijk maar, de Z-index volgorde van het element is veranderd.
Cursors
Wijzig de stijl van de muispunt met CSS.
Filters
Gebruik de filter-eigenschap om de stijl van de titel te wijzigen.
Filters op Afbeeldingen
De filter-eigenschap kan ook worden toegepast op afbeeldingen, hier zijn enkele voorbeelden van afbeeldingen die de filter-eigenschap hebben toegepast.
Watermerk
Achtergrondafbeeldingen die niet bewegen wanneer de pagina scrolt.