Style position -ominaisuus

Määrittely ja käyttö

position Asettaa tai palauttaa elementin sijoittelumetodin tyyppisiä (statiikka, suhteellinen, absoluuttinen tai kiinteä).

Lisäksi suositellaan:

CSS oppituntiohjelma：CSS sijoittelu

CSS viittausoppikirja：position-ominaisuus

Esimerkki

Esimerkki 1

Muuta <div>-elementin sijoitus suhteellisesta sijoituksesta absoluuttiseen sijoitukseen:

document.getElementById("myDIV").style.position = "absolute";

Kokeile itse

Esimerkki 2

Käytä erilaisia sijoittumistapoja:

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Kokeile itse

Esimerkki 3

Palauttaa <h2>-elementin sijoituksen:

alert(document.getElementById("myH2").style.position);

Kokeile itse

Syntaksi

Palauta position-ominaisuus:

object.style.position

Aseta position-ominaisuus:

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

Ominaisuuden arvo

Arvo Kuvaus
static Elementit esitetään niiden dokumenttivirtaan liittyvän järjestyksen mukaisesti. Oletus.
absolute Elementti sijoitetaan sen ensimmäisen sijoitetun (ei staattisen) isäntälajin suhteessa.
fixed Elementti sijoitetaan suhteessa selaimen ikkunaan.
relative

Elementti sijoitetaan suhteelliseen sijaintiin sen normaalista sijainnista.

Siksi "left:20" lisää elementin vasemman reunan sijainnin 20 kuvapistettä.
sticky

Elementti sijoitetaan käyttäjän roolauksen sijainnin perusteella.

Jäykkä elementti vaihtaa suhteellisen ja kiinnittyvän sijoittumisen roolauksen sijainnin perusteella.

Se on suhteellisesti sijoitettu, kunnes sen annettu siirtymäpaikka kohdataan näytönäkymässä - sitten se "leijuu" sopivaan sijaintiin (esim. position:fixed).

Huomautus:Ei tueta IE/Edge 15 tai aikaisempia versioita. Safari tukee Webkit-prefiksejä versiosta 6.1 lähtien.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso initial.
inherit Perii tämän ominaisuuden isältään. Katso inherit.

Tekninen yksityiskohta

Oletusarvo: static
Palautusarvo: merkkijono, joka ilmaisee elementin sijainnin tyyppin.
CSS versio CSS2

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki