DHTML CSS Positioning (CSS-P)

CSS käytetään HTML-elementtien tyyleihin lisäämiseen.

Esimerkki

Huomautus：Useimmat DHTML-esimerkit vaativat IE 4.0+、Netscape 7+ tai Opera 7+!

position:relative
Kuinka sijoittaa tämä elementti suhteellisesti sen normaalista sijaintiin?
position:relative
Kuinka sijoittaa kaikki otsikot suhteellisesti niiden normaalista sijaintiin?
position:absolute
Kuinka määritellä elementti absoluuttisella arvolla?

Lisää esimerkkejä löydät sivun alalta.

Mitkä ominaisuudet voidaan käyttää CSS-P:n kanssa?

Ensinnäkin, elementin on määritettävä position ominaisuus (relative tai absolute).

Sitten voin asettaa seuraavat CSS-P ominaisuudet:

  • left - elementin vasemman laidan sijainti
  • top - elementin ylälaidan sijainti
  • visibility - määritä elementin näkyvyys tai piilottaminen
  • z-index - elementin kerrosjärjestys
  • clip - elementin leikkaus
  • overflow - kuinka käsitellä ylivoimaisia sisältöjä

Position

CSS:n position ominaisuus sallii sinun hallita elementin sijoittamista dokumentissa.

position:relative

position:relative ominaisuus sijoittaa elementin sen normaalista sijainnista.

Yllä oleva esimerkki sijoittaa tämän div-elementin 10 kuvion etäisyydelle sen normaalista sijainnista oikealle:

div
{
position:relative;
left:10;
}

position:absolute

position:absolute ominaisuus sijoittaa elementin etäisyydelle ikkunan marginista.

Yllä oleva esimerkki sijoittaa tämän div-elementin 10 kuvion etäisyydelle sen sisältävän marginin oikealle puolelle:

div
{
position:absolute;
left:10;
}

Näkyvyys

visibility ominaisuus päättää, näkyykö elementti.

visibility:visible

visibility:visible ominaisuus tekee elementistä näkyvän.

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden ominaisuus tekee elementistä näkymättömän.

h1
{
visibility:hidden;
}

Z-index

z-index ominaisuus asettaa elementin toisen elementin jälkeen. z-index:n oletusarvo on 0. Arvojen korkeampi, sitä suurempi etusija. z-index: -1 on matalampi etusija.

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

Yllä olevassa esimerkissä, jos h1 ja h2 yhdistyvät, h2-elementti sijaitsee h1:n yläpuolella.

Suodattimet

filter ominaisuus sallii sinun lisätä lisää tyylejä tekstiin ja kuvauksiin.

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

Huomautus：Jos haluat käyttää filter ominaisuutta, määritä aina elementin leveys.

Yllä oleva esimerkki tuottaa seuraavan tuloksen:

Otsikko

Eri suodattimet

Huomautus：Ellei background-color ominaisuus aseteta arvoon transparent, jotkut Filter ominaisuudet eivät toimi!

ominaisuudet parametrit kuvaus esimerkki
alpha
  • läpinäkyvyys
  • loppusävy
  • tyyli
  • alkusyvyex
  • alkusyvyysy
  • loppusyvyex
  • loppusyvyysy
 salli sinun asettaa elementin läpinäkyvyyden 
filter:alpha(
läpinäkyvyys=20,
loppusävy=100,
tyyli=1,
alkusyvyex=0, 
alkusyvyysy=0,
loppusyvyex=140,
loppusyvyysy=270)
blur
  • add
  • suunta
  • voimakkuus
 pehmennä elementtiä 
filter:blur(
add=true,
suunta=90,
voimakkuus=6);
chroma väri tehdä määritellystä väristä läpinäkyvän 
filter:chroma(
väri=#ff0000)
fliph none horisontaalinen käänteiskäännös filter:fliph;
flipv none pystysuuntainen käänteiskäännös filter:flipv;
glow
  • väri
  • voimakkuus
 tehdä elementistä kirkkauden 
filter:glow(
väri=#ff0000,
voimakkuus=5);
gray none esitä elementti mustavalkoisesti filter:gray;
invert none esitä elementti käänteisillä väreillä ja kirkkausarvoilla filter:invert;
mask väri esitä elementti määritellyllä taustavärillä ja läpinäkyvällä etualalla 
filter:mask(
väri=#ff0000);
varjo
  • väri
  • suunta
 esitä elementti varjolla 
filter:shadow
(väri=#ff0000,
suunta=90);
dropshadow
  • väri
  • offx
  • offy
  • positive
 esitä elementti varjolla 
filter:dropshadow
(väri=#ff0000,
offx=5,
offy=5,
positive=true);
aalto
  • add
  • freq
  • valovoimakkuus
  • faza
  • voimakkuus
 esitä elementti aaltojen muodossa 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Näytä elementit mustavalkoisesti, joilla on käänteinen väri ja valaistusarvo. filter:xray;

Tausta

Background-ominaisuus mahdollistaa omien taustojen valinnan.

background-attachment:scroll

Tausta pyörii sivun pyörittäessä.

background-attachment:fixed

Tausta ei liiku sivun pyörittäessä.

Lisää esimerkkejä

Näkyvyys
Miten tehdä elementistä näkymätön. Haluatko, että tämä elementti näkyy vai ei?
Z-index
Z-index voidaan käyttää elementin sijoittamiseen toisen elementin taakse käyttämällä Z-index järjestystä.
Z-index
Katso, elementin Z-index järjestys on muuttunut.
Kurssit
Muuta hiiren osoittimen tyyliä CSS:n avulla.
Suodattimet
Muuta otsikon tyyliä käyttämällä filter-ominaisuutta.
Kuvien suodattimet
Filter-ominaisuus voidaan soveltaa myös kuvien päälle, tässä on joitakin kuvia, joihin filter-ominaisuus on sovellettu.
Vedenmerkki
Taustakuva ei liiku, kun sivu pyörii.