Pozisyon Eleman sipèpoze ak Sheen Style kaskad
Youn nan defi yo lè w ap itilize CSS pwezante pou layout paj entènèt se ke kèk nan eleman ou ka sipèpoze lòt moun. Sa a ap travay amann si ou vle eleman ki sot pase a nan HTML la yo dwe sou tèt, men sa ki si ou pa oswa sa ki si ou vle gen eleman ki kounye a pa kouvri lòt moun yo fè sa paske konsepsyon an apèl pou sa a "kouch" gade ? Yo nan lòd yo chanje eleman yo fason sipèpoze ou bezwen sèvi ak pwopriyete a nan CSS.
Si ou te itilize yon zouti grafik nan Pawòl ak PowerPoint oswa plis gaya editè imaj tankou Adobe Photoshop, Lè sa a, chans yo ou te wè yon bagay tankou z-endèks nan aksyon. Nan pwogram sa yo, ou ka mete aksan sou objè (yo) ke ou te trase, epi chwazi yon opsyon nan "Voye nan do" oswa "Pote devan" eleman sèten nan dokiman ou. Nan fotoschop, ou pa gen fonksyon sa yo, men ou fè gen fenèt la "Kouch" nan pwogram nan epi ou ka fè aranjman kote yon eleman tonbe nan twal la pa ranplase kouch sa yo. Nan tou de nan egzanp sa yo, ou se esansyèlman mete z-endèks la nan sa yo objè.
Ki sa ki z-endèks?
Lè w ap itilize CSS pwezante nan eleman pozisyon nan paj la, ou bezwen panse nan twa dimansyon. Gen de dimansyon estanda: gòch / dwat ak tèt / anba. Gòch la nan endèks dwa li te ye kòm x-endèks la, pandan y ap tèt la anba yon sèl se y-endèks la. Sa a se ki jan ou ta eleman pozisyon orizontal oswa vètikal, lè l sèvi avèk sa yo de endis.
Lè an vini nan konsepsyon sit entènèt, gen tou lòd la anpile nan paj la. Chak eleman nan paj la ka kouch pi wo a oswa pi ba nenpòt lòt eleman. Z-endèks la pwopriyete detèmine ki kote nan chemine a chak eleman se. Si x endèks ak y-endèks yo se liy orizontal yo ak vètikal, Lè sa a, z-endèks se pwofondè nan paj la, esansyèlman dimansyon nan 3yèm.
Mwen renmen panse a eleman yo sou yon Paj Web kòm moso nan papye, ak paj wèb la tèt li kòm yon kolaj. Ki kote mwen kouche papye a detèmine pa pwezante, ak ki jan anpil nan li kouvri pa lòt eleman yo se z-endèks la.
Z-endèks la se yon nimewo, swa pozitif (egzanp 100) oswa negatif (egzanp -100). Z-endèks la default se 0. Eleman an ak z-endèks ki pi wo a se sou tèt, ki te swiv pa pwochen pi wo a ak sou sa desann nan pi ba z-endèks la. Si de eleman gen menm z-endèks valè a (oswa li pa defini, sa vle di itilize valè a default nan 0) navigatè a pral kouch yo nan lòd yo parèt nan HTML la.
Kijan pou yo itilize z-endèks
Bay chak eleman ou vle nan chemine ou yon diferan z-endèks valè. Pa egzanp, si mwen gen senk eleman diferan:
- eleman 1 - z-endèks de -25
- eleman 2 - z-endèks nan 82
- eleman 3 - z-endèks pa mete
- eleman 4 - z-endèks nan 10
- eleman 5 - z-endèks -3
Yo pral pile nan lòd sa a:
- eleman 2
- eleman 4
- eleman 3
- eleman 5
- eleman 1
Mwen rekòmande lè l sèvi avèk valè vaste diferan z-endèks pile eleman ou yo. Nan fason sa a, si ou ajoute plis eleman nan paj la pita, ou gen plas kouch yo nan san yo pa gen ajiste valè yo z-endèks nan tout lòt eleman yo. Pa egzanp:
- 100 pou tèt-pi eleman mwen
- 0 pou eleman mwayen mwen
- -100 pou eleman anba mwen
Ou kapab tou bay de eleman menm valè a z-endèks. Si eleman sa yo anpile, yo pral montre nan lòd yo ekri nan HTML la, ak eleman ki sot pase a sou tèt.
Yon nòt, pou yon eleman nan efektivman sèvi ak pwopriyete a z-endèks, li dwe yon eleman nivo blòk oswa itilize yon ekspozisyon nan "blòk" oswa "aliye blòk" nan dosye CSS ou.
Original atik pa Jennifer Krynin. Edited sou 12/09/16 pa Jeremy Girard.