Elementtien 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.css
Huomio
Jos asetamme saman arvon
z-index
-ominaisuudelle eri elementeille, selain näyttää elementit siinä järjestyksessä kuin ne ovathtml
-tiedostossa.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04
Elementtien 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.css
Huomio
Jos asetamme saman arvon
z-index
-ominaisuudelle eri elementeille, selain näyttää elementit siinä järjestyksessä kuin ne ovathtml
-tiedostossa.
Kiitos palautteestasi!