Miten luodaan: kiinnitettävä kuva

Opi, miten CSS:llä luodaan kiinnitettäviä kuvia.

Kiinnitettävä kuva

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

Kokeile itse

Asetettu position: sticky; elementit sijoitetaan käyttäjän vierityspositiosta riippuen.

Kiinnitettävät elementit vaihtavat suhteellisen ja kiinnitetyn sijoittelun välillä riippuen vierityspositiosta. Ennen kuin ne saavuttavat annetun etäisyyden näyttöalueessa, ne ovat suhteellisessa sijoittelussa - sitten ne 'kiinnittyvät' paikalleen (esim. position:fixed)

Huomioitavaa:Internet Explorer, Edge 15 ja aikaisemmat versiot eivät tue kiinnitysasentoa. Safari vaatii -webkit- Etunimi (katso esimerkki). Jotta kiinnitysasento toimisi, on myös vähintään yksi määritettävä yläjaoikeajaalas tai vasen 其中的一个。

Liittyvät sivut

Oppitunti:CSS kuva

Oppitunti:CSS sijoittelu