ایا تاسو کله هم په خپل CSS کې په یو عنصر کې z-index: 99999 ترتیب کړی، او دا د نورو عناصرو په سر کې نه راځي؟ یو ارزښت چې لوی وي باید دا عنصر په اسانۍ سره د بل هر څه په سر کې ځای په ځای کړي، داسې انګیرل کیږي چې ټول مختلف عناصر یا په ټیټ ارزښت کې ټاکل شوي یا په هیڅ ډول ندي ټاکل شوي. یوه ویب پاڼه معمولا په دوه اړخیز ځای کې ښودل کیږي. په هرصورت، د ځانګړو CSS ملکیتونو په پلي کولو سره، یو خیالي z-axis الوتکه معرفي کیږي ترڅو ژورتیا وړاندې کړي. دا الوتکه د سکرین سره عمودي ده، او له هغې څخه، کاروونکي د عناصرو ترتیب درکوي، یو د بل په سر کې. د خیالي z-axis تر شا مفکوره، د سټیک شوي عناصرو په اړه د کارونکي تصور، دا دی چې د CSS ملکیتونه چې دا رامینځته کوي د هغه څه رامینځته کولو لپاره ترکیب کوي چې موږ یې د سټکینګ شرایط بولو. موږ به د دې په اړه وغږیږو چې څنګه عناصر په ویب پا pageه کې "سټیک شوي" دي ، څه شی د سټیکینګ ترتیب کنټرولوي ، او د اړتیا په وخت کې د عناصرو "غیر سټک" لپاره عملي لارې چارې. د سټیک کولو شرایطو په اړه خپل ویب پاڼه د میز په توګه تصور کړئ. لکه څنګه چې تاسو د HTML عناصر اضافه کوئ، تاسو د کاغذ ټوټې ایښودل، یو له بل وروسته، په میز کې. د کاغذ وروستۍ ټوټه د وروستي اضافه شوي HTML عنصر سره مساوي ده، او دا د نورو ټولو کاغذونو په سر کې ځای لري چې مخکې یې ایښودل شوي. دا د عادي سند جریان دی حتی د ځړول شوي عناصرو لپاره. میز پخپله د ریټ سټیکینګ شرایط استازیتوب کوي، د عنصر لخوا رامینځته شوی، کوم چې نور ټول فولډرونه لري. اوس، ځانګړي CSS ملکیتونه په لوبې کې راځي. ملکیتونه لکه موقعیت (د z-index سره)، شفافیت، بدلون، او شامل دي) د فولډر په څیر عمل کوي. دا فولډر یو عنصر او د هغې ټول ماشومان اخلي، له اصلي سټیک څخه یې استخراجوي، او په جلا فرعي سټیک کې یې ګروپ کوي، هغه څه رامینځته کوي چې موږ یې د سټکینګ شرایط بولو. د موقعیت لرونکي عناصرو لپاره، دا هغه وخت پیښیږي کله چې موږ د آٹو پرته د z-index ارزښت اعلان کړو. د ځانګړتیاوو لپاره لکه د شفافیت، بدلون، او فلټر لپاره، د سټیکینګ شرایط په اوتومات ډول رامینځته کیږي کله چې ځانګړي ارزښتونه پلي کیږي.
هڅه وکړئ په دې پوه شئ: یوځل چې د کاغذ یوه ټوټه (یعنې د ماشوم عنصر) په فولډر کې دننه وي (د بیلګې په توګه د مور او پلار سټکینګ شرایط) ، دا هیڅکله له دې فولډر څخه بهر نشي یا په بل فولډر کې د کاغذونو ترمینځ کیښودل کیدی شي. د دې z-index اوس یوازې په خپل فولډر کې اړوند دی.
په لاندې انځور کې، کاغذ B اوس د فولډر B د سټیکینګ شرایطو کې دی، او یوازې په فولډر کې د نورو کاغذونو سره امر کیدی شي.
تصور وکړئ، که تاسو غواړئ، تاسو په خپل میز کې دوه فولډر لرئ:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
راځئ چې مارک اپ یو څه تازه کړو. د فولډر A دننه یوه ځانګړې پاڼه ده، z-index: 9999. د فولډر B دننه یوه ساده پاڼه ده، z-index: 5.
ځانګړې پاڼه { z-index: 9999; } .plain-page { z-index: 5; }
کومه پاڼه په سر کې ده؟ دا په B فولډر کې .plain پاڼه ده. براوزر د ماشومانو کاغذونه له پامه غورځوي او دوه فولډرونه لومړی سټک کوي. دا فولډر B (z-index: 2) ګوري او دا د فولډر A (z-index: 1) په سر کې ځای په ځای کوي ځکه چې موږ پوهیږو چې دوه له یو څخه لوی دي. په عین حال کې، د .special-page z-index: 9999 پاڼه د سټیک په پای کې ده پداسې حال کې چې د دې z-index لوړ احتمالي ارزښت ته ټاکل شوی. د سټکینګ شرایط هم ځړول کیدی شي (د فولډر دننه فولډر) ، د "کورنۍ ونې" رامینځته کول. ورته اصول پلي کیږي: ماشوم هیڅکله نشي کولی د خپل مور او پلار له فولډر څخه وتښتي. اوس چې تاسو ترلاسه کوئ چې د سټکینګ شرایط څنګه د فولډرونو په څیر چلند کوي چې پرتونه ګروپ کوي او بیا تنظیموي، دا د پوښتنې وړ ده: ولې ځینې ملکیتونه - لکه بدلون او شفافیت - د سټکینګ نوي شرایط رامینځته کوي؟ دلته خبره ده: دا ملکیتونه د سټکینګ شرایط نه رامینځته کوي ځکه چې دوی څنګه ښکاري؛ دوی دا د دې له امله کوي چې څنګه براوزر د هود لاندې کار کوي. کله چې تاسو بدلون، شفافیت، فلټر، یا لید پلي کوئ، تاسو براوزر ته ووایاست، "ای، دا عنصر ممکن حرکت وکړي، څرخي، یا تیاره وي، نو چمتو اوسئ!"
کله چې تاسو دا ملکیتونه وکاروئ ، براوزر د رینډینګ ډیر مؤثره اداره کولو لپاره نوي سټیکینګ شرایط رامینځته کوي. دا براوزر ته اجازه ورکوي چې متحرکات، بدلونونه، او بصري اغیزې په خپلواکه توګه اداره کړي، د بیا حساب کولو اړتیا کموي چې دا عناصر د پاڼې د پاتې برخې سره څنګه تعامل کوي. د دې په اړه د براوزر په څیر فکر وکړئ ، "زه به دا فولډر په جلا توګه اداره کړم نو زه اړتیا نلرم چې هرکله چې دننه یو څه بدل شي ټول میز له سره بدل کړم." مګر شتون لريیو اړخیزه اغیزه. یوځل چې براوزر یو عنصر په خپل پرت کې پورته کړي ، نو دا باید په دې کې دننه هرڅه "فلیټ" کړي ، د سټکینګ نوي شرایط رامینځته کړي. دا د میز څخه د فولډر اخیستلو په څیر دی چې دا په جلا توګه اداره کوي؛ د دې فولډر دننه هرڅه ګروپ شوي، او براوزر اوس دا د یو واحد واحد په توګه چلند کوي کله چې پریکړه وکړي چې د څه په سر کې ناست وي. نو که څه هم د بدلون او شفافیت ملکیتونه ښایي په هغه طریقه اغیزه ونلري چې عناصر یې په لید کې سټیک کوي، دوی یې کوي، او دا د فعالیت اصلاح لپاره دی. د CSS ډیری نور ملکیتونه هم کولی شي د ورته دلیلونو لپاره د سټیکینګ شرایط رامینځته کړي. MDN یو بشپړ لیست وړاندې کوي که تاسو غواړئ ژور وخورئ. دلته یو څو شتون لري، کوم چې یوازې دا په ګوته کوي چې دا څومره اسانه ده چې په ناڅاپي ډول د سټیکینګ شرایطو رامینځته کول پرته له دې چې پوه شي. د "انسټیک کولو" ستونزه د سټیک کولو مسلې د ډیری دلیلونو لپاره رامینځته کیدی شي ، مګر ځینې یې د نورو په پرتله خورا عام دي. د موډل اجزا یو کلاسیک نمونه ده ځکه چې دوی اړتیا لري د نورو ټولو عناصرو څخه پورته پورتنۍ پرت کې د "پرانستل" لپاره اجزا بدل کړي ، بیا یې د پورتنۍ پرت څخه لرې کوي کله چې دا "بند" وي. زه ډیر ډاډه یم چې موږ ټول داسې وضعیت ته رسیدلي یو چیرې چې موږ ماډل خلاصوو او د هر دلیل لپاره ، دا نه څرګندیږي. دا نده چې دا په سمه توګه نه دی خلاص شوی، مګر دا چې دا د سټیکینګ شرایطو په ټیټ پرت کې د لید څخه بهر دی. دا تاسو حیرانتیا پریږدي "څنګه راځي؟" له هغه وخته چې تاسو ترتیب کړئ:
.overlay { موقعیت: ثابت؛ /* د سټکینګ شرایط رامینځته کوي */ z-index: 1; /* عنصر د هر څه پورته پرت کې اچوي */ inset: 0; عرض: 100%؛ لوړوالی: 100vh؛ overflow: پټ د شاليد رنګ: #00000080; }
دا سمه ښکاري، مګر که چیرې د موډل محرک لرونکي اصلي عنصر په بل اصلي عنصر کې د ماشوم عنصر وي چې د z-index: 1 ته هم ټاکل شوی، چې په تخنیکي ډول موډل د اصلي فولډر لخوا پټ شوي فرعي پرت کې ځای په ځای کوي. راځئ چې دا ځانګړي سناریو او یو څو نور عام سټکینګ - شرایطو زیانونو ته وګورو. زه فکر کوم چې تاسو به نه یوازې دا وګورئ چې په ناڅاپه توګه د سټیکینګ شرایطو رامینځته کول څومره اسانه دي ، بلکه د دوی ناسم اداره کول هم. همچنان ، تاسو څنګه اداره شوي حالت ته بیرته ستنیږئ په وضعیت پورې اړه لري. 1 سناریو: پټ شوی موډل
تاسو کولی شئ سمدلاسه وګورئ چې خپل موډل د ټیټې کچې پرت کې ځړول شوی او والدین وپیژنئ. د براوزر توسیعونه سمارټ پراختیا کونکو د مرستې لپاره تمدیدونه رامینځته کړي. د دې په څیر وسیلې د "CSS سټیکینګ مقالو انسپکټر" کروم توسیع ستاسو په DevTools کې اضافي z-index ټب اضافه کوي ترڅو تاسو ته د هغه عناصرو په اړه معلومات وښیې چې د سټیکینګ شرایط رامینځته کوي.
IDE توسیع تاسو حتی کولی شئ د پراختیا پرمهال مسلې د VS کوډ لپاره د دې په څیر توسیع سره ومومئ ، کوم چې په مستقیم ډول ستاسو په مدیر کې د احتمالي سټیکینګ شرایطو مسلې روښانه کوي.
بې ځایه کول او کنټرول بیرته ترلاسه کول وروسته لدې چې موږ اصلي لامل وپیژندو ، بل ګام د دې سره معامله کول دي. دلته ډیری لارې شتون لري چې تاسو یې کولی شئ د دې ستونزې سره مبارزه وکړئ، او زه به یې په ترتیب سره لیست کړم. تاسو کولی شئ په هره کچه هرڅوک وټاکئ، که څه هم؛ هیڅوک نشي کولی شکایت وکړي یا د بل مخه ونیسي. د HTML جوړښت بدل کړئ دا غوره حل ګڼل کیږي. د دې لپاره چې تاسو د سټکینګ شرایطو مسلې ته ورسیږئ، تاسو باید ځینې عناصر په خپل HTML کې په مسخره پوستونو کې ځای په ځای کړي وي. د پاڼې بیا تنظیم کول به تاسو سره د DOM بیا شکل کولو کې مرسته وکړي او د سټکینګ شرایطو ستونزه له مینځه ویسي. ستونزه لرونکی عنصر ومومئ او په HTML مارک اپ کې د ځړولو عنصر څخه لرې کړئ. د مثال په توګه، موږ کولی شو لومړی سناریو حل کړو، "د ټرپډ موډل"، د موډل کانټینر له سرلیک څخه بهر او په خپله د
عنصر کې ځای په ځای کولو سره.دا منځپانګه د z-index 2 لري او بیا به موډل نه پوښي.سرلیک
اصلي منځپانګه
کله چې تاسو د "خلاص موډل" تڼۍ کلیک وکړئ، موډل د هر څه په وړاندې موقعیت لري لکه څنګه چې باید وي. د قلم سناریو 1 وګورئ: د شایومبو ګابریل آیومایډ لخوا پټ شوی ماډل (حل) [فورک شوی]. تنظیم کړئپه CSS کې د والدین سټیک کولو شرایط څه که چیرې عنصر یو وي تاسو نشئ کولی د ترتیب ماتولو پرته حرکت وکړئ؟ دا غوره ده چې مسله حل کړئ: مور او پلار شرایط رامینځته کوي. د سی ایس ایس ملکیت (یا ملکیتونه) ومومئ چې د شرایطو محرک کولو لپاره مسؤل دي او لرې کړئ. که دا یو هدف ولري او لیرې نشي، مور او پلار ته د هغه د وروڼو عناصرو په پرتله لوړ Z-index ارزښت ورکړئ ترڅو ټول کانټینر پورته کړي. د لوړ Z-index ارزښت سره، اصلي کانټینر سر ته ځي، او ماشومان یې کاروونکي ته نږدې ښکاري. د هغه څه پراساس چې موږ په "ډب شوي ډراپ ډاون" سناریو کې زده کړل، موږ نشو کولی ډراپ ډاون له نیوبار څخه بهر کړو؛ دا به معنی ونلري. په هرصورت، موږ کولی شو د .navbar کانټینر د z-index ارزښت زیات کړو ترڅو د .content عنصر د z-index ارزښت څخه ډیر وي. .navbar { پس منظر: #333؛ /* z-index: 1; */ z-index: 3; مقام: خپلوان }
د دې بدلون سره، .dropdown-menu اوس پرته له کومې مسلې د منځپانګې په مخ کې ښکاري.
د قلم سناریو 2 وګورئ: ډوب شوي ډراپ ډاون (حل) د شوومبو ګابریل آیومایډ لخوا [فورک شوی].
پورټلونه هڅه وکړئ، که د چوکاټ کاروئ
د عکس العمل یا ویو په څیر چوکاټونو کې، پورټل یوه ځانګړتیا ده چې تاسو ته اجازه درکوي په DOM کې د هغې د عادي مورنۍ درجې څخه بهر یوه برخه وړاندې کړئ. پورټلونه ستاسو د اجزاوو لپاره د ټیلیپوریشن وسیلې په څیر دي. دوی تاسو ته اجازه درکوي په سند کې هرچیرې د یوې برخې HTML وړاندې کړئ (معمولا د document.body کې) پداسې حال کې چې دا په منطقي ډول د پروپس ، حالت او پیښو لپاره د خپل اصلي پلار سره وصل ساتي. دا د سټکینګ شرایطو جالونو څخه د تیښتې لپاره مناسب دی ځکه چې وړاندې شوی محصول په لفظي ډول د ستونزې لرونکي اصلي کانټینر څخه بهر ښکاري.
ReactDOM.createPortal(
دا ډاډ ورکوي چې ستاسو د ښکته کولو مینځپانګه د هغې د مور او پلار شاته پټه نه ده ، حتی که چیرې والدین ډیر جریان ولري: پټ یا ټیټ زیډ انډیکس. د "کلیپ شوي اوزار ټایپ" سناریو کې چې موږ دمخه ولیدل ، ما د وسیلې ټایپ د ډیریدو څخه د ژغورلو لپاره پورټل کارولی: پټ کلیپ د سند په بدن کې ځای په ځای کولو او په کانټینر کې د محرک څخه پورته ځای په ځای کولو سره. د قلم سناریو 3 وګورئ: د کلپ شوي اوزار ټایپ (حل) د شوومبو ګابریل آیومایډ لخوا [فورک شوی]. د اړخیزو تاثیراتو پرته د سټیکینګ شرایطو معرفي کول ټولې هغه تګلارې چې په تیرې برخې کې تشریح شوي هدف یې د ستونزمن سټیکینګ شرایطو څخه د عناصرو "ناسټیک کولو" لپاره دي، مګر ځینې شرایط شتون لري چیرې چې تاسو واقعیا اړتیا لرئ یا غواړئ د سټکینګ شرایط رامینځته کړئ. د نوي سټیکینګ شرایطو رامینځته کول اسانه دي ، مګر ټولې لارې د اړخیزې اغیزې سره راځي. دا، د جلا کولو کارولو پرته: جلا کول. کله چې په یوه عنصر باندې تطبیق شي، د دې عنصر د ماشومانو د سټیک کولو شرایط د هر ماشوم او په هغه شرایطو کې ټاکل کیږي، د دې پر ځای چې د هغې څخه بهر د عناصرو لخوا اغیزمن شي. یو کلاسیک مثال هغه عنصر ته منفي ارزښت ورکول دي، لکه z-index: -1. تصور وکړئ چې تاسو د .card برخه لرئ. تاسو غواړئ یو آرائشی شکل اضافه کړئ چې د .card متن شاته ناست وي ، مګر د کارت شالید په سر کې. په کارت کې د سټکینګ شرایطو پرته ، z-index: -1 شکل د ریښې سټکینګ شرایطو لاندې ته لیږي (ټوله پاڼه). دا د کارت د سپینې شالید شاته ورکوي: د قلم منفي زیډ انډیکس (ستونزه) وګورئ [فورک شوی] د شوومبو جبریل آیومایډ لخوا. د دې د حل کولو لپاره، موږ انزوا اعلان کوو: په مور او پلار کې جلا کول. د قلم منفي z-index (حل) وګورئ [فورک شوی] د شوومبو جبریل آیومایډ لخوا. اوس، د .card عنصر پخپله د سټکینګ شرایط کیږي. کله چې د دې ماشوم عنصر - آرائشی شکل چې په :before pseudo-element کې رامینځته شوی - د z-index: -1 لري، دا د مور او پلار د سټکینګ شرایطو خورا ښکته ته ځي. دا په بشپړ ډول د متن شاته او د کارت شالید په سر کې ناست دی ، لکه څنګه چې هدف. پایله په یاد ولرئ: بل ځل چې ستاسو د z-index له کنټرول څخه بهر ښکاري، دا د پټو سټیکینګ شرایط دی. حوالې
د ذخیره کولو شرایط (MDN) Z-index او د سټکینګ شرایط (web.dev) "په CSS کې د جلا کولو ملکیت سره د نوي سټیکینګ شرایطو رامینځته کولو څرنګوالی" ، نټالي پینا "څه شی دی هیک، زیډ انډیکس؟؟"، جوش کومو
په SmashingMag کې نور لوستل
"په لویو پروژو کې د CSS Z-Index اداره کول"، سټیون فریسن "چپکې سرې او د بشپړ لوړوالي عناصر: یو ستونزمن ترکیب"، فیلیپ براونین "د یوې برخې پر بنسټ ویب غوښتنلیک کې د Z-Index اداره کول"، Pavel Pomerantsev "د Z-Index CSS ملکیت: یو جامع لید"، لویس لازاریس
