CSS asettelu - position ominaisuus

position Ominaisuus määrittää elementin sijainnin menetelmän tyyppiselle (static, relative, fixed, absolute tai sticky).

position-ominaisuus

position ominaisuus määrittää sovellettavan elementin paikallistustavan tyyppisen.

On viisi eri sijoitusarvoa:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Elementit itse ovat top, bottom, left ja right -ominaisuuksien avulla paikallistettuja. Mutta ellemme aseta ensin position-ominaisuutta, nämä ominaisuudet eivät toimi. Ominaisuudet toimivat eri tavoin eri position-arvojen mukaan.

position: static;

HTML-elementtien oletussijoitus on static (static).

Static-tilassa olevat elementit eivät ole top, bottom, left ja right -ominaisuuksien vaikutuksen alaisia.

position: static; -ominaisuuden elementit eivät sijoitu erityisellä tavalla; ne sijoittuvat aina sivun normaaliseen virrasta:

Tämä <div>-elementti asettaa position: static;

Tämä on käytetty CSS:

Esimerkki

div.static {
  position: static;
  reunaviiva: 3px solju #73AD21;
}

Kokeile itse

position: relative;

position: relative; elementit sijoitetaan suhteessa niiden normaaliseen sijaintiin.

Suhteellisen paikallistetun elementin top, right, bottom ja left -ominaisuuksien asettaminen johtaa sen poikkeamiseen normaalista sijainnistaan säätämään.

Tämä <div>-elementti asettaa position: relative;

Tämä on käytetty CSS:

Esimerkki

div.relative {
  position: relative;
  left: 30px;
  reunaviiva: 3px solju #73AD21;
}

Kokeile itse

position: fixed;

position: fixed; elementit ovat näytönreunaan suhteessa paikallistettuja, mikä tarkoittaa, että vaikka sivua pyöritetään, ne pysyvät aina samassa sijainnissa. Top, right, bottom ja left -ominaisuudet käytetään tämän elementin sijoittamiseen.

Kiinnitettyyn paikallistettuun elementtiin ei jätetä tilaa sivulla yleensä sijoitettavan sijainnin sijaan.

Huomaa tämä kiinnitetty elementti sivun oikeassa alakulmassa. Tämä on käytetty CSS:

Esimerkki

div.fixed {
  position: fixed;
  bottom: 0;
  oikea: 0;
  width: 300px;
  reunaviiva: 3px solju #73AD21;
}

Kokeile itse

Tämä <div>-elementti asettaa position: fixed;

position: absolute;

position: absolute; elementit sijoitetaan lähimmän paikallistetun isäntäelementin suhteen (ei näytönreunaan suhteessa, kuten fixed).

Kuitenkin, jos absoluuttisesti paikallistetulla elementillä ei ole isäntää, se käyttää dokumentin pääasua (body) ja siirtyy sivun roolauksen mukana.

Huomioitavaa:“Paikallistetut” elementit ovat niiden sijainnin suhteen static muiden elementtien osalta.

Tämä on yksinkertainen esimerkki:

Tämä <div>-elementti asettaa position: relative;
Tämä <div>-elementti asettaa position: absolute;

Tämä on käytetty CSS:

Esimerkki

div.relative {
  position: relative;
  width: 400px;
  korkeus: 200px;
  reunaviiva: 3px solju #73AD21;
} 
div.absolute {
  position: absolute;
  ylä: 80px;
  oikea: 0;
  leveys: 200px;
  korkeus: 100px;
  reunaviiva: 3px solju #73AD21;
}

Kokeile itse

position: sticky;

position: sticky; elementtien sijoittuvat käyttäjän liikkuvan sijainnin mukaan.

liukuvat elementit sijoittuvat suhteelliseen (relative) ja kiinteä (fixed) välillä vaihdella. Aluksi se on suhteellinen sijoittaminen, kunnes se saavuttaa annetun etäisyyden näkymässä - sitten se "liimataan" oikeaan sijaintiin (esim. position:fixed).

Huomioitavaa:Internet Explorer, Edge 15 ja aikaisemmat versiot eivät tue liukuvaa sijoittamista. Safari vaatii -webkit- etuliitteen (katso alla oleva esimerkki). Sinun on myös vähintään määritettävä top,right,bottom tai left yksi, jotta liukuvuus sijoittaminen toimii.

Tässä esimerkissä sticky-elementti pysyy sivun yläosassa, kun se saavuttaa sen liikkuvan sijainnin (top: 0)

Esimerkki

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  takapuoli: vihreä;
  reunaviiva: 2px solju #4CAF50;
}

Kokeile itse

Törmäävät elementit

Kun elementtejä sijoitetaan, ne voivat törmätä muiden elementtien kanssa.

z-index Ominaisuus määrittää elementin kerrosjärjestyksen (mikä elementti asetetaan muiden elementtien eteen tai taakse).

Elementti voi asettaa positiivisen tai negatiivisen kerrosjärjestyksen:

Tämä on otsikko

Koska kuvan z-index on -1, se sijaitsee tekstin takana.

Esimerkki

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Kokeile itse

Elementit, joilla on korkeampi kerrosjärjestys, sijoitetaan aina ennen elementtejä, joilla on matalampi kerrosjärjestys.

Huomioitavaa:Huomioitavaa: z-indexJos kaksi sijoitettua elementtiä törmäävät eikä niitä ole määritelty

Sijoita teksti kuvan sisälle

Kuinka sijoittaa teksti kuvan päälle:

Esimerkki

CodeW3C.com Logo
Alareuna vasen
Yläreuna vasen
Yläreuna oikea
Alareuna oikea
Keskitetty

Kokeile itse:

Yläreuna vasen Yläreuna oikea Alareuna vasen Alareuna oikea Keskitetty

Lisää esimerkkejä

Aseta elementin muoto
Tämä esimerkki näyttää, miten elementin muotoa voidaan asettaa. Elementti leikataan tähän muotoon ja näytetään.

Kaikki CSS-sijainnin ominaisuudet

ominaisuus kuvaus
bottom Aseta sijainnin asettamisen alareunan reunaviiva.
clip Leikkaa pois absoluuttisesti sijoitetut elementit.
left Aseta sijoituslaatikon vasemman reunan ulkoreuna.
position Määritä elementin sijoitusmuoto.
right Aseta sijoituslaatikon oikean reunan ulkoreuna.
top Aseta sijoituslaatikon ylä reunan ulkoreuna.
z-index Aseta elementin kerrosjärjestys.

Lisäluettelo

课外书：CSS sijoittelu yleiskatsaus

课外书：CSS suhteellinen sijoittelu

课外书：CSS absoluuttinen sijoittelu