Tso Tawm Qhia Cov Ntsiab Lus Uas Muaj Cov Ntawv Txiav Txim Ua Cascading
Ib qho ntawm cov teeb meem thaum siv CSS qhov chaw rau qhov web page layout yog tias qee qhov ntawm koj cov ntsiab lus yuav thim lwm tus. Lus hauv no teb Qhov no ua haujlwm fine yog tias koj xav tau lub caij nyoog kawg hauv HTML rau saum toj, tab sis yog tias koj tsis ua li cas los sis yog tias koj xav kom muaj cov ntsiab lus uas tam sim no tsis sib tw ua rau lwm tus ua li ntawd vim tus qauv hu rau qhov "fawm kib" ? Yuav kom hloov txoj kev ua ke sib tshooj koj yuav tsum siv cov cuab yeej ntawm CSS.
Yog tias koj tau siv cov cuab yeej cuab yeej graphic hauv Word thiab PowerPoint los sis ntau yam duab tsim duab zoo ib yam li Adobe Photoshop, ces yuav muaj koj tau pom ib yam dab tsi zoo li z-qhov kev tshawb fawb. Nyob rau cov kev pabcuam no, koj tuaj yeem hais txog cov khoom siv uas koj tau kos, thiab xaiv ib qho "Send to Back" lossis "Nqa mus rau pem hauv ntej" tej feem ntawm koj daim ntawv. Hauv Photoshop, koj tsis muaj cov hauj lwm no, tab sis koj muaj cov txheej txheem "Layer" ntawm qhov kev pab cuam thiab koj tuaj yeem npaj qhov twg lub caij ntog hauv lub canvas los hloov cov txheej no. Hauv ob qho ntawm cov qauv no, koj yeej tseem zoo qhov teem z-index ntawm cov khoom.
Z-Performance index yog dab tsi?
Thaum koj siv CSS qhov chaw mus rau qhov chaw nyob rau sab, koj yuav tsum xav txog peb qhov ntev. Muaj ob qhov txheej txheem: sab laug / sab xis thiab saum / hauv qab. Sab laug rau sab xis txoj kev ntsuas yog hu ua x-index, thaum saum toj mus rau hauv qab ib qho yog qhov kev ntsuas y. Qhov no yog li cas koj yuav position ntsiab horizontally los yog vertically, siv cov ob indexes.
Thaum twg los txog ntawm qhov web tsim, kuj muaj qhov kev txiav txim ntawm cov nplooj ntawv. Txhua lub caij ntawm nplooj ntawv tuaj yeem muab fawm saum toj los sis qis dua lwm cov khoom. Z-Performance index txiav txim seb qhov twg hauv pawg txhua lub caij. Yog hais tias x-Performance index thiab Y-index yog cov kab rov tav thiab txoj kab, ces z-Performance index yog qhov tob ntawm nplooj ntawv, qhov tseem ceeb ntawm qhov koob thib 3.
Kuv nyiam xav txog cov ntsiab lus ntawm lub vev xaib ua ib daim ntawv, thiab cov nplooj ntawv web page yog ib qho khoom siv. Qhov twg kuv tso daim ntawv txiav txim siab los ntawm qhov chaw, thiab ntau npaum li cas ntawm lwm qhov yog cov z-index.
Z-Performance index yog tus lej, qhov zoo (xws li 100) lossis tsis pom zoo (xws li -100). Lub neej z-Performance Index yog 0. Lub caij nrog z-Performance index siab tshaj plaws nyob rau saum toj, ua raws li qhov siab tshaj tom ntej thiab thiaj li nyob rau qis qis dua. Yog hais tias ob lub ntsiab lus muaj tib z-index nqi (los yog nws tsis txhais, lub ntsiab lus siv qhov default default of 0) qhov browser yuav txheej lawv nyob rau hauv qhov kev txiav txim lawv tshwm sim hauv cov HTML.
Yuav ua li cas Siv Z-Performance index
Muab txhua lub caij koj xav tau hauv koj pawg z-index txawv. Piv txwv li, yog tias kuv muaj tsib lub ntsiab lus:
- keeb kwm 1 - z-Performance index ntawm -25
- keeb 2 - z-Performance index ntawm 82
- caij 3 - z-index tsis teem
- keeb kwm 4 - z-Performance index 10
- keeb kwm 5 - z-Performance index ntawm -3
Lawv yuav ua raws li cov lus hauv qab no:
- caij 2
- caij 4
- caij 3
- caij 5
- keeb kwm 1
Kuv xav siv vastly sib txawv z-index qhov tseem ceeb los teeb koj cov ntsiab lus. Ntawd txoj kev, yog tias koj ntxiv ntau lub ntsiab rau cov nplooj ntawv tom qab, koj muaj chav teeb rau lawv tsis tas hloov kho z-index qhov tseem ceeb ntawm tag nrho lwm cov ntsiab lus. Piv txwv li:
- 100 rau kuv cov npe saum toj kawg nkaus
- 0 rau kuv lub caij nyoog nruab nrab
- -100 rau kuv lub caij nyoog kawg
Koj tuaj yeem muab ob lub ntsiab z-index nqi. Yog hais tias cov ntsiab lus no tau muab teev, lawv yuav tso tawm rau hauv qhov kev txiav txim uas lawv sau rau hauv HTML, nrog rau lub caij xeem saum toj.
Ib qho kev ceeb toom, rau ib lub caij los siv cov z-index khoom zoo, nws yuav tsum yog theem ntawm theem los yog siv cov yeeb yaj kiab "block" lossis "inline block" hauv koj cov ntaub ntawv CSS.
Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited on 12/09/16 los ntawm Jeremy Girard.