Pípa Awọn Ẹrọ Ṣiṣakoṣo Awọn Atilẹyin pẹlu Awọn Ẹrọ Ọtọrọ Ọpa
Ọkan ninu awọn italaya nigba lilo ipo CSS fun oju-iwe ayelujara oju-iwe ni pe diẹ ninu awọn eroja rẹ le ṣe atunṣe awọn elomiran. Eyi n ṣiṣẹ daradara ti o ba fẹ ki o jẹ ẹyin ti o kẹhin ninu HTML lati oke, ṣugbọn ohun ti o ba ṣe tabi ohun ti o ba fẹ lati ni awọn eroja ti Lọwọlọwọ ko ṣe atunṣe awọn elomiran lati ṣe bẹ nitori pe awọn apẹrẹ awọn ipe fun yi "wo" ? Lati le yipada awọn ohun elo ti o wa lori ọna rẹ o nilo lati lo ohun-ini ti CSS.
Ti o ba ti lo awọn irinṣẹ aworan aworan ni Ọrọ ati PowerPoint tabi diẹ ẹ sii ju olootu aworan bi Adobe Photoshop, lẹhinna o ṣeeṣe ti o ti ri nkan bi z-index in action. Ni awọn eto wọnyi, o le ṣe afihan ohun ti o ti fa, ki o si yan aṣayan lati "Firanṣẹ lati pada" tabi "Mu wa siwaju" awọn ohun elo ti iwe rẹ. Ni Photoshop, o ko ni awọn iṣẹ wọnyi, ṣugbọn o ni ori iwe "Layer" ti eto naa ati pe o le seto ibi ti ohun kan ba ṣubu ninu kanfasi nipa sisọ awọn ipele wọnyi. Ninu awọn apẹẹrẹ wọnyi, iwọ n ṣe afihan awọn z-itọka ti awọn ohun naa.
Kini z-atọka?
Nigbati o ba n lo aaye CSS si awọn ipo ti o wa ni oju-iwe, o nilo lati ronu ni awọn ipele mẹta. Awọn ọna kika mejeeji wa: osi / ọtun ati oke / isalẹ. Osi-apa osi si apa ọtun ni a mọ bi x-itọka, lakoko ti oke si isalẹ ọkan ni itọka y. Eyi ni bi o ṣe le ṣeto awọn eroja ni ita tabi ni inaro, pẹlu lilo awọn atọka wọnyi.
Nigba ti o ba de si apẹrẹ oju-iwe ayelujara, nibẹ tun ni aṣẹ iṣaju ti oju-iwe naa. Kọọkan asayan lori oju-iwe le wa ni laye ni oke tabi ni isalẹ eyikeyi miiran ano. Awọn ohun elo-z-index ipinnu ibi ti o wa ninu adajọ kọọkan ero jẹ. Ti x-itọka ati y-itọka jẹ awọn ila ti o wa petele ati inaro, lẹhinna z-itọka jẹ ijinle ti oju-iwe, paapaa awọn ọna mẹta.
Mo fẹ lati ronu awọn eroja lori oju-iwe wẹẹbu bi awọn iwe-iwe, ati oju-iwe ayelujara ti ararẹ gẹgẹbi akojọpọ. Nibo ni mo dubulẹ iwe naa ni ipinnu nipasẹ ipo, ati bi o ti jẹ pe awọn ero miiran ti bo nipasẹ rẹ ni z-index.
Awọn z-index jẹ nọmba kan, boya rere (fun apẹẹrẹ 100) tabi odi (fun apẹẹrẹ -100). Awọn aiyipada z-index jẹ 0. Ẹri pẹlu asọye-t-giga ti o wa ni oke, tẹle atẹle ti o ga julọ ati bẹ lọ si isalẹ si awọn itọka-z-isalẹ. Ti awọn eroja meji ba ni iye-z-index (tabi kii ṣe alaye, ti o tumọ si lilo iye aiyipada ti 0) aṣàwákiri yoo ṣe agbekalẹ wọn ni aṣẹ ti wọn han ninu HTML.
Bi o ṣe le lo itọka-z
Fi ipinkan kọọkan ti o fẹ ninu akopọ rẹ ti o yatọ si asọ-z-index. Fun apẹẹrẹ, ti o ba ni awọn eroja oriṣiriṣi marun:
- aṣiṣe 1 - z-index of -25
- aṣiṣe 2 - z-index of 82
- ano 3 - z-index ko ṣeto
- ano 4 - z-index of 10
- ano 5 - z-index of -3
Wọn yoo ṣe akopọ ninu ilana wọnyi:
- ano 2
- ano 4
- ano 3
- ano 5
- eleri 1
Mo ṣe iṣeduro nipa lilo awọn ipo-z-atọka ti o pọju lati ṣe akopọ awọn eroja rẹ. Iyẹn ọna, ti o ba fi awọn ero diẹ sii si oju-iwe naa nigbamii, iwọ ni aye lati gbe wọn kalẹ lai ṣe atunṣe awọn ẹtọ-z-index ti gbogbo awọn ero miiran. Fun apere:
- 100 fun ipilẹ mi ti o tobi julọ
- 0 fun idiwọ mi laarin
- -100 fun ipilẹ mi
O tun le fun awọn eroja meji kanna iye-z-index. Ti awọn nkan wọnyi ba ti ni idapọ, wọn yoo han ni aṣẹ ti a kọ wọn sinu HTML, pẹlu ipin ti o kẹhin lori oke.
Akọsilẹ kan, fun ipinnu lati lo awọn ohun-ini z-index, o gbọdọ jẹ ifilelẹ idibajẹ kan tabi lo ifihan ti "àkọsílẹ" tabi "apo-inline" ninu faili CSS rẹ.
Atilẹkọ article nipasẹ Jennifer Krynin. Ṣatunkọ lori 12/09/16 nipasẹ Jeremy Girard.