In This Article

Njẹ o ti ṣeto z-index: 99999 lori eroja kan ninu CSS rẹ, ati pe ko jade lori awọn eroja miiran? Iye kan ti o tobi yẹ ki o fi irọrun gbe nkan yẹn ni wiwo lori ohunkohun miiran, ni ro pe gbogbo awọn eroja oriṣiriṣi ti ṣeto ni boya iye kekere tabi ko ṣeto rara. Oju-iwe wẹẹbu kan maa n ṣe afihan ni aaye onisẹpo meji; sibẹsibẹ, nipa lilo awọn ohun-ini CSS kan pato, oju-ofurufu z-axis ti o ni imọran ni a ṣe afihan lati sọ ijinle. Ọkọ ofurufu yii jẹ papẹndikula si iboju, ati lati ọdọ rẹ, olumulo lo mọ aṣẹ ti awọn eroja, ọkan lori oke ekeji. Ero ti o wa lẹhin z-axis ti o ni imọran, imọran olumulo ti awọn eroja ti a ti tolera, ni pe awọn ohun-ini CSS ti o ṣẹda rẹ darapọ lati ṣe ohun ti a pe ni ipo iṣakojọpọ. A yoo sọrọ nipa bawo ni awọn eroja ti wa ni “tolera” lori oju opo wẹẹbu kan, kini o nṣakoso aṣẹ iṣakojọpọ, ati awọn isunmọ to wulo si awọn eroja “unstack” nigbati o nilo. Nipa Stacking Awọn ọrọ Fojuinu oju-iwe wẹẹbu rẹ bi tabili kan. Bi o ṣe ṣafikun awọn eroja HTML, o n gbe awọn ege iwe, ọkan lẹhin ekeji, lori tabili. Awọn ti o kẹhin nkan ti awọn iwe gbe ni deede si awọn julọ laipe fi kun HTML ano, ati awọn ti o joko lori oke ti gbogbo awọn miiran ogbe gbe niwaju rẹ. Eyi ni ṣiṣan iwe deede, paapaa fun awọn eroja itẹ-ẹiyẹ. Iduro naa funrarẹ duro fun ipo isakojọpọ root, ti a ṣẹda nipasẹ eroja , eyiti o ni gbogbo awọn folda miiran ninu. Bayi, awọn ohun-ini CSS kan pato wa sinu ere. Awọn ohun-ini bii ipo (pẹlu atọka z-), opacity, yipada, ati ninu) ṣiṣẹ bi folda kan. Fọọmu yii gba ipin kan ati gbogbo awọn ọmọ rẹ, yọ wọn jade lati akopọ akọkọ, o si ṣe akojọpọ wọn sinu akopọ ipin lọtọ, ṣiṣẹda ohun ti a pe ni aaye akopọ. Fun awọn eroja ti o wa ni ipo, eyi yoo ṣẹlẹ nigbati a ba sọ iye z-index yatọ si adaṣe. Fun awọn ohun-ini bii opacity, iyipada, ati àlẹmọ, ipo akopọ jẹ ṣẹda laifọwọyi nigbati awọn iye kan pato lo.

Gbiyanju lati loye eyi: Ni kete ti iwe kan (ie, nkan ọmọ) wa ninu folda kan (i.e., agbegbe akopọ ti obi), ko le jade kuro ni folda yẹn tabi gbe laarin awọn iwe sinu folda miiran. Z- atọka rẹ jẹ ibaramu nikan ni inu folda tirẹ.

Ninu apejuwe ti o wa ni isalẹ, Iwe B wa bayi laarin ipo akopọ ti Folda B, ati pe o le paṣẹ nikan pẹlu awọn iwe miiran ninu folda naa.

Fojuinu, ti o ba fẹ, pe o ni awọn folda meji lori tabili rẹ:

.folda-a {z-index: 1; } .folda-b {z-index: 2; }

Jẹ ki a ṣe imudojuiwọn isamisi diẹ diẹ. Inu Folda A jẹ oju-iwe pataki, z-index: 9999. Inu Folda B jẹ oju-iwe itele, z-index: 5.

.oju-iwe pataki {z-index: 9999; } .oju-iwe pẹtẹlẹ {z-index: 5; }

Oju-iwe wo ni o wa lori oke? O jẹ oju-iwe pẹtẹlẹ ni Folda B. Aṣàwákiri foju kọ awọn iwe ọmọ silẹ o si ṣajọ awọn folda meji ni akọkọ. O n wo Folda B (z-index: 2) o si gbe e si oke Folda A (z-index: 1) nitori a mọ pe meji tobi ju ọkan lọ. Nibayi, oju-iwe pataki ti a ṣeto si z-index: Oju-iwe 9999 wa ni isalẹ ti akopọ botilẹjẹpe z-index ti ṣeto si iye ti o ga julọ ti ṣee ṣe. Awọn ipo iṣakojọpọ tun le jẹ itẹ-ẹiyẹ (awọn folda inu awọn folda), ṣiṣẹda “igi idile.” Ilana kanna kan: ọmọde ko le sa fun folda awọn obi rẹ lae. Ni bayi ti o gba bawo ni awọn ipo iṣakojọpọ ṣe huwa bi awọn folda ti o ṣe akojọpọ ati tunto awọn ipele, o tọ lati beere: kilode ti awọn ohun-ini kan - bii iyipada ati opacity - ṣẹda awọn aaye akopọ tuntun? Eyi ni ohun naa: awọn ohun-ini wọnyi ko ṣẹda awọn ipo akopọ nitori bi wọn ṣe wo; wọn ṣe nitori bi ẹrọ lilọ kiri ayelujara ṣe n ṣiṣẹ labẹ hood. Nigbati o ba lo iyipada, opacity, àlẹmọ, tabi irisi, o n sọ fun ẹrọ aṣawakiri naa, “Hey, nkan yii le gbe, yiyi, tabi ipare, nitorinaa mura!”

Nigbati o ba lo awọn ohun-ini wọnyi, ẹrọ aṣawakiri naa ṣẹda ipo iṣakojọpọ tuntun lati ṣakoso ṣiṣe daradara siwaju sii. Eyi ngbanilaaye ẹrọ aṣawakiri lati mu awọn ohun idanilaraya, awọn iyipada, ati awọn ipa wiwo ni ominira, idinku iwulo lati tun ṣe iṣiro bi awọn eroja wọnyi ṣe nlo pẹlu iyoku oju-iwe naa. Ronu nipa rẹ bi ẹrọ aṣawakiri ti n sọ pe, “Emi yoo mu folda yii lọtọ ki Emi ko ni lati tun gbogbo tabili pada ni gbogbo igba ti ohunkan ninu rẹ ba yipada.” Ṣugbọn o waa ẹgbẹ ipa. Ni kete ti ẹrọ aṣawakiri naa ba gbe nkan kan sinu ipele tirẹ, o gbọdọ “pin” ohun gbogbo ti o wa ninu rẹ, ṣiṣẹda aaye akopọ tuntun kan. O dabi gbigbe folda kan kuro ni tabili lati mu ni lọtọ; Ohun gbogbo ti o wa ninu folda yẹn ni a ṣe akojọpọ, ati ẹrọ aṣawakiri naa ṣe itọju rẹ bi ẹyọkan kan nigbati o pinnu kini o joko lori kini. Nitorinaa botilẹjẹpe iyipada ati awọn ohun-ini opacity le ma han lati ni ipa ni ọna ti awọn eroja ṣe akopọ ni wiwo, wọn ṣe, ati pe o jẹ fun iṣapeye iṣẹ. Orisirisi awọn ohun-ini CSS miiran tun le ṣẹda awọn ipo akopọ fun awọn idi kanna. MDN n pese atokọ pipe ti o ba fẹ ma wà jinle. Awọn diẹ ni o wa, eyiti o ṣapejuwe bi o ṣe rọrun lati ṣe airotẹlẹ ṣẹda ipo iṣakojọpọ laisi mimọ rẹ. Awọn isoro "Unstacking". Awọn ọran ikọlu le dide fun awọn idi pupọ, ṣugbọn diẹ ninu jẹ wọpọ ju awọn miiran lọ. Awọn paati awoṣe jẹ apẹrẹ Ayebaye nitori wọn nilo yiyi paati lati “ṣii” lori Layer oke ju gbogbo awọn eroja miiran lọ, lẹhinna yọkuro kuro ni ipele oke nigbati o “tipade.” Mo ni igboya pupọ pe gbogbo wa ti lọ sinu ipo kan nibiti a ṣii modal ati, fun ohunkohun ti idi, ko han. Kii ṣe pe ko ṣii daradara, ṣugbọn pe ko si ni wiwo ni ipele kekere ti ipo akopọ. Eyi jẹ ki o ṣe iyalẹnu “bawo ni?” niwon o ṣeto:

.bori { ipo: ti o wa titi; /* ṣẹda ipo isakojọpọ */ z- atọka: 1; /* fi eroja sori ipele kan ju ohun gbogbo lọ */ ifibọ: 0; iwọn: 100%; iga: 100vh; àkúnwọ́sílẹ̀: farasin; abẹlẹ-awọ: # 00000080; }

Eyi dabi pe o tọ, ṣugbọn ti o ba jẹ pe nkan obi ti o ni okunfa modal jẹ ẹya ọmọ laarin nkan obi miiran ti o tun ṣeto si z-index: 1, iyẹn ni imọ-ẹrọ gbe ipo modal sinu sublayer ti o ṣokunkun nipasẹ folda akọkọ. Jẹ ki a wo oju iṣẹlẹ kan pato ati tọkọtaya kan ti awọn ọfin-ọgọ-ọrọ ti o wọpọ miiran. Mo ro pe iwọ yoo rii kii ṣe bi o ṣe rọrun nikan lati ṣẹda awọn ipo iṣakojọpọ lairotẹlẹ, ṣugbọn tun bi o ṣe le ṣakoso wọn. Pẹlupẹlu, bi o ṣe pada si ipo iṣakoso da lori ipo naa. Oju iṣẹlẹ 1: Modal idẹkùn

O le lẹsẹkẹsẹ wo modal rẹ idẹkùn ni ipele kekere kan ki o ṣe idanimọ obi naa. Awọn amugbooro aṣawakiri Awọn olupilẹṣẹ Smart ti kọ awọn amugbooro lati ṣe iranlọwọ. Awọn irin-iṣẹ bii “CSS Stacking Context Inspector” Chrome itẹsiwaju ṣafikun afikun taabu z-index si Awọn irinṣẹ DevTools rẹ lati fi alaye han ọ nipa awọn eroja ti o ṣẹda ipo akopọ.

IDE amugbooro O le paapaa ni iranran awọn ọran lakoko idagbasoke pẹlu itẹsiwaju bii eyi fun koodu VS, eyiti o ṣe afihan awọn ọran ipo ipo iṣakojọpọ taara taara ninu olootu rẹ.

Unstacking Ati Gbigba Iṣakoso Lẹhin ti a ti mọ idi ti gbongbo, igbesẹ ti n tẹle ni lati koju rẹ. Awọn ọna pupọ lo wa ti o le mu lati koju iṣoro yii, ati pe Emi yoo ṣe atokọ wọn ni ibere. O le yan ẹnikẹni ni eyikeyi ipele, tilẹ; kò sí ẹni tí ó lè ráhùn tàbí dí ẹlòmíràn lọ́wọ́. Yi Eto HTML pada Eyi ni a gba pe atunṣe to dara julọ. Fun o lati ṣiṣe awọn sinu kan stacking o tọ oro, o gbọdọ ti gbe diẹ ninu awọn eroja ni funny awọn ipo laarin rẹ HTML. Atunto oju-iwe naa yoo ṣe iranlọwọ fun ọ lati tun DOM ṣe ati imukuro iṣoro ọrọ-ọrọ akopọ. Wa nkan ti o ni iṣoro ki o yọ kuro lati nkan idẹkùn ni isamisi HTML. Fun apẹẹrẹ, a le yanju oju iṣẹlẹ akọkọ, "Modal Trapped," nipa gbigbe .modal-container kuro ninu akọsori ati gbigbe si inu eroja funrararẹ.

Akọsori Modal Ṣii

Akoonu akọkọ

Akoonu yii ni atọka z-2 ko si ni bo modal naa.

Akọle awoṣe

Nisisiyi, Emi ko leyin ohunkohun. Mo ti ni ipo to dara julọ bi abajade ti atunto DOM.

Pade