CSS position ominaisuus

Määrittely ja käyttö

Position-ominaisuus määrittää elementin sijoitusmuodon.

Kuvaus

Tämä ominaisuus määrittää elementin sijoittamiseen käytettävän mekanismin elementin asettamiseksi. Kaikki elementit voidaan sijoittaa, mutta absoluuttiset tai kiinteät elementit luo blokkimaisen kehysrakenteen riippumatta elementin omasta tyypistä. Suhteellisesti sijoitetut elementit siirtyvät suhteessa niiden normaalissa virrassa olevaan sijaintiin.

Katso myös:

CSS-opas:CSS-sijoittelu

HTML DOM -viittausopas:position-ominaisuus

Esimerkki

Sijoita h2-elementti:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Kokeile itse

CSS-kieli

position: static|absolute|fixed|relative|sticky|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
absolute

Luo absoluuttisesti sijoitettu elementti, joka sijoitetaan suhteessa ensimmäiseen static-tilassa olevaan vanhemmassa elementissä.

Elementin sijainti määritellään "left", "top", "right" ja "bottom"-ominaisuuksilla.
fixed

Luo absoluuttisesti sijoitettu elementti, joka sijoitetaan suhteessa selaimen ikkunaan.

Elementin sijainti määritellään "left", "top", "right" ja "bottom"-ominaisuuksilla.
relative

Luo suhteellisesti sijoitettu elementti, joka sijoitetaan suhteessa sen normaaliseen sijaintiin.

Siksi "left:20" lisää 20 pikseliä elementin vasempaan sijaintiin.
static Oletusarvo. Ilman sijoittelua elementti näkyy normaalissa virrassa (piilotetaan top, bottom, left, right tai z-index-lausekkeet).
inherit Määritellään, että position-ominaisuuden arvo tulisi perittää vanhemmalta elementiltä.

Tekninen yksityiskohta

Oletusarvo: static
Perinnäisyys: ei
Versio: CSS2
JavaScript-kieli: object.style.position="absolute"

TIY esimerkki

Sijoittelu: suhteellinen sijoittelu
Tämä esimerkki näyttää, miten elementtiä voidaan sijoittaa suhteessa elementin normaaliseen sijaintiin.
Sijoittelu: absoluuttinen sijoittelu
Tämä esimerkki näyttää, miten elementtiä voidaan sijoittaa käyttämällä absoluuttisia arvoja.
Sijoittelu: kiinteä sijoittelu
Tämä esimerkki näyttää, miten elementtiä voidaan sijoittaa suhteessa selaimen ikkunaan.
Aseta elementin muoto
Tämä esimerkki näyttää, miten voidaan asettaa elementin muoto. Tämä elementti leikataan tähän muotoon ja näytetään.
Z-index
Z-index voidaan käyttää elementin sijoittamiseen toisen elementin jälkeen.
Z-index
Yllä olevassa esimerkissä elementin Z-index on muuttunut.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0