Miten luodaan: liimaavat elementit

Opi, miten CSS:llä luodaan liimaavat elementit.

Kokeile itse

Huomioitavaa:Tämä esimerkki ei toimi Internet Explorerissä tai Edge 15:ssä ja aikaisemmissa versioissa.

Liimaavat elementit

Esimerkki

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Kokeile itse

position: sticky; -ominaisuutta käyttävät elementit sijoittuvat käyttäjän vierityspositiosta riippuen.

Liimaavat elementit vaihtavat suhteellisen sijoittelun ja kiinnitetyn sijoittelun välillä riippuen vierityspositiosta. Ennen kuin ne saavuttavat annetun siirtymäpaikan näytön reunalla, ne ovat suhteellisessa sijoittelussa, ja sitten ne 'liimautuvat' paikalleen (kuten position:fixed).

Huomioitavaa:Internet Explorer, Edge 15 ja aikaisemmat versiot eivät tue liimautuvaa sijoittelua. Safari vaatii -webkit -etuliitteen (katso alla oleva esimerkki). Jotta liimautuva sijoittelu toimisi, on määritettävä vähintään yksi top, right, bottom tai left.

Liittyvät sivut

Oppitunti:CSS-sijainti