Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Elementtien Pinoutusjärjestyksen Hallinta | CSS-sijoittelun Hallinta
Edistyneet CSS-tekniikat

bookElementtien Pinoutusjärjestyksen Hallinta

z-index-ominaisuus määrittää sijoitettujen elementtien pinoutumisjärjestyksen verkkosivulla. Se koskee vain sijoitettuja elementtejä, joilla on position-arvona absolute, fixed, relative tai sticky. Koska nämä elementit poistetaan normaalista dokumenttivirrasta, määritämme z-index-arvon, jotta voidaan päättää, mitkä sijoitetuista elementeistä näytetään ylempänä tai alempana.

z-index: number_without_units

Mitä suurempi z-index-arvo elementillä on, sitä ylempänä se näkyy käyttäjän näytöllä.

Harjoitellaan. Meillä on neljä div-elementtiä, joilla on box-luokka. Jokainen on tyylitelty neliöksi ja numeroitu kuvaamaan niiden järjestystä html-dokumentissa. Neliöt ovat tällä hetkellä pinottuina päällekkäin. Tehtävänä on säätää z-index-ominaisuutta oikeilla arvoilla niin, että neliö 3 tulee eteen ja neliö 4 taakse.

index.html

index.html

index.css

index.css

copy

Huomio

Jos asetamme saman arvon z-index-ominaisuudelle eri elementeille, selain näyttää elementit siinä järjestyksessä kuin ne ovat html-tiedostossa.

question mark

Mikä on z-index-ominaisuuden tarkoitus?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 10

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

bookElementtien Pinoutusjärjestyksen Hallinta

Pyyhkäise näyttääksesi valikon

z-index-ominaisuus määrittää sijoitettujen elementtien pinoutumisjärjestyksen verkkosivulla. Se koskee vain sijoitettuja elementtejä, joilla on position-arvona absolute, fixed, relative tai sticky. Koska nämä elementit poistetaan normaalista dokumenttivirrasta, määritämme z-index-arvon, jotta voidaan päättää, mitkä sijoitetuista elementeistä näytetään ylempänä tai alempana.

z-index: number_without_units

Mitä suurempi z-index-arvo elementillä on, sitä ylempänä se näkyy käyttäjän näytöllä.

Harjoitellaan. Meillä on neljä div-elementtiä, joilla on box-luokka. Jokainen on tyylitelty neliöksi ja numeroitu kuvaamaan niiden järjestystä html-dokumentissa. Neliöt ovat tällä hetkellä pinottuina päällekkäin. Tehtävänä on säätää z-index-ominaisuutta oikeilla arvoilla niin, että neliö 3 tulee eteen ja neliö 4 taakse.

index.html

index.html

index.css

index.css

copy

Huomio

Jos asetamme saman arvon z-index-ominaisuudelle eri elementeille, selain näyttää elementit siinä järjestyksessä kuin ne ovat html-tiedostossa.

question mark

Mikä on z-index-ominaisuuden tarkoitus?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 10
some-alt