Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Kiinnitetty Asemointi Tahmeille Käyttöliittymäelementeille | CSS-sijoittelun Hallinta
Edistyneet CSS-tekniikat

bookKiinnitetty Asemointi Tahmeille Käyttöliittymäelementeille

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.

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.

index.html

index.html

index.css

index.css

copy

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

question mark

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

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookKiinnitetty Asemointi Tahmeille Käyttöliittymäelementeille

Pyyhkäise näyttääksesi valikon

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.

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.

index.html

index.html

index.css

index.css

copy

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

question mark

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

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 6
some-alt