Summary  
This chapter covers the CSS position: fixed property, which positions an element relative to the viewport so that it remains in the same place even when the user scrolls.  

General domain of usage  
Web UI components (e.g., sticky navigation or support chat buttons)

**Kiinnitetty sijainti** (fixed positioning) mahdollistaa elementin sijoittamisen suhteessa näkymään (selainikkunaan) sen sijaan, että se olisi suhteessa vanhemman elementtiin. Tämä tarkoittaa, että elementti pysyy aina samassa kohdassa näytöllä, vaikka käyttäjä vierittäisi sivua.
```css
position: fixed;
```

Tätä voidaan hyödyntää esimerkiksi verkkosivun navigaatiossa, joka halutaan pitää aina käyttäjän saatavilla, tai kun näytöllä täytyy pysyvästi esittää tietoa. Harjoitellaan tätä luomalla tukichat-painike, joka pysyy aina näkymän oikeassa alakulmassa.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTm9iaXMsIGlsbG8KICAgICAgbmVxdWUgZG9sb3JlIG1hZ25hbSBuaWhpbCBpbnZlbnRvcmUgZWxpZ2VuZGkgY3VtcXVlIHZvbHVwdGF0aWJ1cywgdm9sdXB0YXMKICAgICAgYXNwZXJpb3JlcyB2b2x1cHRhdHVtPyBIYXJ1bSBleHBlZGl0YSBpbGx1bSBjdW1xdWUgZnVnYSBtb2RpIG5vc3RydW0KICAgICAgZGVzZXJ1bnQgbW9sbGl0aWEsIHNpbnQgc2FlcGUgcXVhZSBxdWFlcmF0IHJlcnVtIHF1YXNpIG9kaW8gaXBzYW0gdml0YWUKICAgICAgbnVsbGEgdm9sdXB0YXMgbWludXMsIGVvcyBlbmltIHRlbmV0dXIuIEN1bXF1ZSBkb2xvcmVtcXVlIG5lY2Vzc2l0YXRpYnVzCiAgICAgIG5lcXVlIHZvbHVwdGF0dW0uCiAgICA8L3A+CiAgICA8cD4KICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRWxpZ2VuZGkKICAgICAgbGFib3Jpb3NhbSBleGVyY2l0YXRpb25lbSBhZCBkZWxlY3R1cyBuZW1vIHZlcml0YXRpcywgaXBzdW0gZGVsZW5pdGkhIEFtZXQKICAgICAgbGliZXJvIHF1aWEgdGVtcG9yYSBmdWdpYXQgYW5pbWkgYmVhdGFlLCBsYWJvcnVtIGEuIEluIGVzdCByZXBlbGxlbmR1cwogICAgICB1bmRlIGRpY3RhIHN1bnQgdGVtcG9yZSBvZmZpY2lpcyBhZCBleGVyY2l0YXRpb25lbSBuZWNlc3NpdGF0aWJ1cwogICAgICBxdWlidXNkYW0gdm9sdXB0YXMgbWFnbmFtLCByZXB1ZGlhbmRhZSBpbGx1bSBhbmltaSBkb2xvcmlidXMgY29uc2VjdGV0dXIKICAgICAgcHJvdmlkZW50IG51bGxhIGNvbW1vZGkhIE1vbGVzdGlhZSBwZXJmZXJlbmRpcywgcGxhY2VhdCBmdWdhIGJlYXRhZSwgY3VtCiAgICAgIGlwc3VtIGxhYm9ydW0gbmFtIGxhYm9yZSB0ZW1wb3JlIG1hZ25hbSBpcHNhbSByZXB1ZGlhbmRhZSBkZWJpdGlzIGZ1Z2l0CiAgICAgIGF1dCBtb2xsaXRpYSBzaXQsIGRvbG9yZW1xdWUgYXBlcmlhbSBjdXBpZGl0YXRlIGltcGVkaXQgZG9sb3JlIGlsbG8uCiAgICAgIENvbW1vZGkgcmVwZWxsZW5kdXMgY29ycG9yaXMgZWFxdWUgc2ltaWxpcXVlIHZvbHVwdGFzIG9iY2FlY2F0aSwgdGVuZXR1cgogICAgICB1dCBtYWduYW0gcXVpcyBhdXRlbSwgc2FwaWVudGUgcG9zc2ltdXM/IERvbG9yZW1xdWUgcmVjdXNhbmRhZSBsYWJvcmlvc2FtCiAgICAgIHZlbCBuZXF1ZSBpc3RlIG1pbnVzIHJlcHJlaGVuZGVyaXQgbWFnbmkgbWFpb3JlcywgYWxpcXVhbSBuZXNjaXVudCBxdWk/CiAgICA8L3A+CiAgICA8cD4KICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRG9sb3JlbXF1ZSBkb2xvcgogICAgICBwcmFlc2VudGl1bSBlc3NlIGRlc2VydW50IG9mZmljaWlzIHF1YXMgYXNwZXJpb3JlcyBtYWduaSBhbmltaSByZW0gaXVzdG8KICAgICAgY29tbW9kaSBxdW8sIGluY2lkdW50IG5vc3RydW0gbmF0dXMgcG9ycm8gcmVpY2llbmRpcyBldCBhbGlxdWlkIGV2ZW5pZXQKICAgICAgb3B0aW8hIFVsbGFtLCBzdXNjaXBpdCBxdWkgcXVpcyBpcHNhbSBwZXJmZXJlbmRpcyBsYWJvcnVtIGxhdWRhbnRpdW0/CiAgICAgIEJsYW5kaXRpaXMgc29sdXRhLCBuZWNlc3NpdGF0aWJ1cyBpdGFxdWUsIGRlc2VydW50IGJlYXRhZSBzdXNjaXBpdAogICAgICBkb2xvcmVzLCBjb25zZXF1dW50dXIgZXggdm9sdXB0YXRlIHByYWVzZW50aXVtIHJlcHJlaGVuZGVyaXQgZWFydW0KICAgICAgY29ycnVwdGkgcXVhZXJhdCBjdW0gaGljISBOdWxsYSBhbWV0IGRlYml0aXMgbWluaW1hIGFjY3VzYW11cy4gTW9kaSwgaGljCiAgICAgIHF1aSwgZXggaWQgZnVnYSB2ZXJpdGF0aXMgYXQgdmVsaXQgcXVhZSBpbGxvIG51bGxhIGxhYm9yZSBwb3JybywgaXBzYSBlc3NlCiAgICAgIG5vYmlzIGFzcGVybmF0dXIuCiAgICA8L3A+CiAgICA8YnV0dG9uPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9jaGF0K2ltYWdlK2Zvcit0aGUrcnVubmFibGUrZXhhbXBsZS5wbmciCiAgICAgICAgYWx0PSJjaGF0IGljb24iCiAgICAgICAgd2lkdGg9IjU2cHgiCiAgICAgIC8+CiAgICA8L2J1dHRvbj4KICA8L2JvZHk+CjwvaHRtbD4=

YnV0dG9uIHsKICAvKiBUaGlzIGNoYXB0ZXIgZm9jdXMgKi8KICBwb3NpdGlvbjogZml4ZWQ7CiAgYm90dG9tOiAxMHB4OwogIHJpZ2h0OiAxMHB4OwoKICAvKiByZW1vdmUgZGVmYXVsdCBidXR0b24gYmVoYXZpb3IgKi8KICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICBib3JkZXI6IG5vbmU7CiAgY3Vyc29yOiBwb2ludGVyOwp9

Chat-painike on aina käyttäjän saatavilla. Se ei katoa vieritettäessä. Tämä saavutettiin pelkästään `position: fixed;` -ominaisuudella.

Mikä on `position: fixed` -ominaisuuden käyttäytyminen?

Kehitä tyylittelytaitojasi hallitsemalla edistyneet CSS-tekniikat modernia verkkosuunnittelua varten. Sijoita ja hallitse elementtejä tarkasti käyttämällä kehittyneitä asemointistrategioita. Luo sulavia siirtymiä ja mukaansatempaavia animaatioita parantaaksesi käyttökokemusta. Muunna ja käsittele elementtejä dynaamisten visuaalisten tehosteiden saavuttamiseksi. Rakenna responsiivisia suunnitelmia, jotka mukautuvat eri laitteille, ja tehosta työnkulkuasi CSS-esikäsittelijöillä, kuten Sassilla.

Tutustu, mitä oppijat voivat odottaa tältä edistyneen HTML- ja CSS-tyylittelyn kurssilta. Mitä esitietoja tarvitaan ennen kurssin aloittamista? Mitä aiheita kurssilla käsitellään?

Sijoita ja hallitse elementtejä verkkosivuilla. Tutustu erilaisiin sijoitteluominaisuuksiin, opi käyttämään pinontajärjestystä päällekkäisten elementtien näkyvyyden hallintaan sekä käsittele sisällön ylivuotoa.

Tutki siirtymien tehokkuutta ja opi parantamaan käyttökokemusta. Selvitä, kuinka ominaisuuksia voidaan elävöittää sulavasti ja asteittain, luoden saumattomia tilasiirtymiä.

Opi animaatio-ominaisuudesta ja sen käytöstä dynaamisten ja kiinnostavien suunnittelujen luomisessa. Tutustu monimutkaisten animaatioiden luomiseen avainruutujen avulla sekä animaation hallintaan.

Tutustu transformaatio-ominaisuuteen, jonka avulla voidaan muokata elementtien ulkoasua ja sijaintia verkkosivulla. Opiskele, miten elementtejä skaalataan, kierrätetään, vinotaan ja siirretään kahdessa ja kolmessa ulottuvuudessa. Yhdistä useita transformaatioita monimutkaisempien efektien luomiseksi.

Mukautuvan ja responsiivisen suunnittelun periaatteet ja tekniikat tähtäävät siihen, että verkkosivustot ja sovellukset ovat saavutettavia ja visuaalisesti houkuttelevia eri laitteilla, näytön ko'oilla ja suuntauksilla.

Opi CSS-esiprosessoreista ja siitä, miten ne auttavat kirjoittamaan tehokkaampaa ja helpommin ylläpidettävää koodia. Ymmärrä, kuinka esiprosessoreita käytetään työnkulun yksinkertaistamiseen ja siistimmän CSS-koodin tuottamiseen.

Kiinnitetty Asemointi Tahmeille Käyttöliittymäelementeille

Awesome!

Kiinnitetty Asemointi Tahmeille Käyttöliittymäelementeille