سىز CSS دىكى ئېلېمېنتقا z-index: 99999 نى بەلگىلىگەنمۇ ، ئۇ باشقا ئېلېمېنتلارنىڭ ئۈستىگە چىقمايدۇ؟ ئوخشاش بولمىغان قىممەت بارلىق ئېلېمېنتلارنىڭ تۆۋەنرەك قىممەتكە تەڭشەلگەن ياكى پۈتۈنلەي بېكىتىلمىگەنلىكىنى پەرەز قىلىپ ، ئاسانلا بۇ ئېلېمېنتنى باشقا نەرسىلەرنىڭ ئۈستىگە قويۇپ قويۇشى كېرەك. بىر تور بەت ئادەتتە ئىككى ئۆلچەملىك بوشلۇقتا ئىپادىلىنىدۇ. قانداقلا بولمىسۇن ، كونكرېت CSS خۇسۇسىيىتىنى قوللىنىش ئارقىلىق ، چوڭقۇرلۇقنى يەتكۈزۈش ئۈچۈن تەسەۋۋۇردىكى z ئوق ئوق ئوتتۇرىغا چىقىرىلىدۇ. بۇ ئايروپىلان ئېكرانغا ئۇدۇل كەلگەن بولۇپ ، ئۇنىڭدىن ئىشلەتكۈچى ئېلېمېنتلارنىڭ تەرتىپىنى ھېس قىلىدۇ ، بىرى يەنە بىرىنىڭ ئۈستىدە. تەسەۋۋۇردىكى z ئوقنىڭ ئارقىسىدىكى ئىدىيە ، ئىشلەتكۈچىنىڭ دۆۋىلەنگەن ئېلېمېنتلارغا بولغان تونۇشى ، ئۇنى بارلىققا كەلتۈرگەن CSS خۇسۇسىيىتى بىرلەشتۈرۈلۈپ ، بىز بىر قاتار مەزمۇننى شەكىللەندۈرىدۇ. بىز ئېلېمېنتلارنىڭ تور بەتتە قانداق «تىزىپ قويۇلغانلىقى» ، تىزىش تەرتىپىنى كونترول قىلىدىغانلىقى ۋە ئېھتىياجلىق بولغاندا «يېشىش» ئېلېمېنتلىرىغا ئەمەلىي ئۇسۇللار ھەققىدە توختىلىمىز. مەزمۇنلارنى تىزىش ھەققىدە تور بېتىڭىزنى ئۈستەل سۈپىتىدە تەسەۋۋۇر قىلىپ بېقىڭ. HTML ئېلېمېنتلىرىنى قوشقاندا ، ئۈستەلگە بىر-بىرلەپ قەغەز پارچىلىرىنى قويۇۋاتىسىز. ئەڭ ئاخىرقى قويۇلغان قەغەز ئەڭ يېڭى قوشۇلغان HTML ئېلېمېنتىغا باراۋەر بولۇپ ، ئۇ قويۇلغان باشقا قەغەزلەرنىڭ ئۈستىگە ئولتۇرىدۇ. بۇ ئۇلانغان ئېلېمېنتلار ئۈچۈنمۇ نورمال ھۆججەت ئېقىمى. ئۈستەلنىڭ ئۆزى باشقا بارلىق ھۆججەت قىسقۇچلارنى ئۆز ئىچىگە ئالغان ئېلېمېنتى تەرىپىدىن شەكىللەنگەن يىلتىز تىزىش مەزمۇنىغا ۋەكىللىك قىلىدۇ. ھازىر ، CSS نىڭ خاسلىقى جارى قىلدۇرۇلدى. ئورۇن (z- كۆرسەتكۈچ بىلەن) ، ئېنىقلىق ، ئۆزگەرتىش ۋە ئۆز ئىچىگە ئالغان) خاسلىق قىسقۇچقا ئوخشاش ھەرىكەت قىلىدۇ. بۇ ھۆججەت قىسقۇچ بىر ئېلېمېنت ۋە ئۇنىڭ بارلىق بالىلىرىنى ئېلىپ ، ئۇلارنى ئاساسىي تاختىدىن چىقىرىپ ، ئايرىم تارماق گۇرۇپپىغا ئايرىپ ، بىز بىر گۇرۇپپا مەزمۇن دەپ ئاتايمىز. ئورۇن بەلگىلەش ئېلېمېنتلىرىغا نىسبەتەن ، بىز ئاپتوماتىك كۆرسەتكۈچتىن باشقا z- كۆرسەتكۈچ قىممىتىنى ئېلان قىلغىنىمىزدا يۈز بېرىدۇ. ئېنىقسىزلىق ، ئۆزگەرتىش ۋە سۈزگۈچ قاتارلىق خۇسۇسىيەتلەرگە نىسبەتەن ، كونكرېت قىممەتلەر قوللىنىلغاندا تىزىش مەزمۇنى ئاپتوماتىك ھاسىل بولىدۇ.
بۇنى چۈشىنىشكە تىرىشىڭ: بىر پارچە قەغەز (يەنى بالا ئېلېمېنتى) ھۆججەت قىسقۇچنىڭ ئىچىگە كىرگەندىن كېيىن (يەنى ئاتا-ئانىلارنىڭ تىزىش مەزمۇنى) ، ئۇ ھۆججەت قىسقۇچتىن ھەرگىز چىقالمايدۇ ياكى باشقا ھۆججەت قىسقۇچقا قەغەز ئارىسىغا قويۇلمايدۇ. ئۇنىڭ z- كۆرسەتكۈچى ھازىر پەقەت ئۆزىنىڭ قىسقۇچنىڭ ئىچىدىلا مۇناسىۋەتلىك.
تۆۋەندىكى رەسىمدە ، B قەغەز ھازىر B ھۆججەت قىسقۇچنىڭ تىزىش دائىرىسىدە بولۇپ ، ھۆججەت قىسقۇچتىكى باشقا قەغەزلەر بىلەنلا زاكاز قىلغىلى بولىدۇ.
ئەگەر خالىسىڭىز ، ئۈستەلدە ئىككى ھۆججەت قىسقۇچ بارلىقىنى تەسەۋۋۇر قىلىپ بېقىڭ:
.folder-a {z-index: 1; } .folder-b {z-index: 2; }
بەلگىنى ئازراق يېڭىلاپ باقايلى. A ھۆججەت قىسقۇچنىڭ ئىچىدە ئالاھىدە بەت ، z- كۆرسەتكۈچ: 9999. B قىسقۇچنىڭ ئىچىدە ئاددىي بەت ، z- كۆرسەتكۈچ: 5.
. ئالاھىدە بەت {z-index: 9999; } .plain-page {z-index: 5; }
قايسى بەت ئۈستىدە؟ ئۇ B ھۆججەت قىسقۇچتىكى .plain-page. توركۆرگۈچ بالىلار قەغەزلىرىگە پەرۋا قىلمايدۇ ھەمدە ئالدى بىلەن ئىككى ھۆججەت قىسقۇچنى تىزىدۇ. ئۇ Folder B (z-index: 2) نى كۆرۈپ ، A ھۆججەت قىسقۇچنىڭ ئۈستىگە قويىدۇ (z-index: 1) ، چۈنكى بىز ئىككىسىنىڭ بىردىن چوڭ ئىكەنلىكىنى بىلىمىز. شۇنىڭ بىلەن بىر ۋاقىتتا ، z- كۆرسەتكۈچكە تەڭشەلگەن ئالاھىدە بەت: 9999 بەت ئۇنىڭ z- كۆرسەتكۈچى ئەڭ يۇقىرى قىممەتكە تەڭشەلگەن بولسىمۇ ، تىرەكنىڭ ئاستىدا. تىزىش مەزمۇنىنىمۇ ئۇۋىلاشقا بولىدۇ (ھۆججەت قىسقۇچ ئىچىدىكى ھۆججەت قىسقۇچ) ، «ئائىلە دەرىخى» قۇرغىلى بولىدۇ. ئوخشاش پرىنسىپ قوللىنىلىدۇ: بالا ھەرگىزمۇ ئاتا-ئانىسىنىڭ ھۆججەت قىسقۇچىدىن قېچىپ قۇتۇلالمايدۇ. ھازىر توپلاش مەزمۇنىنىڭ گۇرۇپپا ۋە قاتلاملارنى رەتكە تىزىدىغان ھۆججەت قىسقۇچلارغا ئوخشاش قانداق ھەرىكەت قىلىدىغانلىقىنى ھېس قىلغىنىڭىزدا ، سوراشقا ئەرزىيدۇ: نېمە ئۈچۈن بەزى خۇسۇسىيەتلەر - ئۆزگەرتىش ۋە سۈزۈكلۈككە ئوخشاش يېڭى تىزىش مەزمۇنىنى بارلىققا كەلتۈرىدۇ؟ بۇ يەردە مۇنداق بىر نەرسە بار: بۇ خۇسۇسىيەتلەر قانداق بولغانلىقى ئۈچۈن تىزىش مەزمۇنى ھاسىل قىلمايدۇ. ئۇلار توركۆرگۈچنىڭ ماتور ئاستىدا قانداق ئىشلەيدىغانلىقى ئۈچۈن شۇنداق قىلىدۇ. ئۆزگەرتىش ، ئېنىقلىق ، سۈزگۈچ ياكى كۆز قاراشنى قوللانسىڭىز ، توركۆرگۈچكە «ھەي ، بۇ ئېلېمېنت يۆتكىلىشى ، ئايلىنىشى ياكى سۇسلىشىشى مۇمكىن ، شۇڭا تەييار بولۇڭ!» دەيسىز.
بۇ خۇسۇسىيەتلەرنى ئىشلەتكەندە ، توركۆرگۈچ تېخىمۇ ئۈنۈملۈك ئۈنۈمنى باشقۇرۇش ئۈچۈن يېڭى تىزىش مۇھىتى قۇرىدۇ. بۇ توركۆرگۈچنىڭ كارتون ، ئۆزگەرتىش ۋە كۆرۈنۈش ئۈنۈمىنى مۇستەقىل بىر تەرەپ قىلىشىغا ياردەم بېرىدۇ ، بۇ ئېلېمېنتلارنىڭ باشقا بەتلەر بىلەن ئۆز-ئارا تەسىر كۆرسىتىشىنى قايتا ھېسابلاش ئېھتىياجىنى ئازايتىدۇ. ئۇنى توركۆرگۈنىڭ «بۇ ھۆججەت قىسقۇچنى ئايرىم بىر تەرەپ قىلىمەن ، شۇڭا ھەر قېتىم ئۇنىڭ ئىچىدىكى بىر نەرسە ئۆزگەرگەندە پۈتۈن ئۈستەلنى قايتا تەڭشىشىمنىڭ ھاجىتى يوق» دەپ ئويلاڭ. ئەمما بارئەكىس تەسىر. توركۆرگۈچ بىر ئېلېمېنتنى ئۆزىنىڭ قەۋىتىگە كۆتۈرگەندىن كېيىن ، چوقۇم ئۇنىڭ ئىچىدىكى ھەممە نەرسىنى «تەكشى» قىلىپ ، يېڭى تىزىش مۇھىتى يارىتىشى كېرەك. بۇ ئۈستەلدىن ھۆججەت قىسقۇچنى ئايرىم بىر تەرەپ قىلغانغا ئوخشاش. ئۇ ھۆججەت قىسقۇچنىڭ ئىچىدىكى ھەممە نەرسە گۇرۇپپىلىنىدۇ ، توركۆرگۈچ ھازىر نېمىنىڭ ئۈستىدە ئولتۇرۇشنى قارار قىلغاندا ئۇنى بىر گەۋدە دەپ قارايدۇ. گەرچە ئۆزگەرتىش ۋە ئېنىقلىق خۇسۇسىيىتى قارىماققا ئېلېمېنتلارنىڭ كۆرۈنۈش شەكلىگە تەسىر كۆرسىتەلمىسىمۇ ، ئەمما ئۇلار ئىقتىدارنى ئەلالاشتۇرۇش ئۈچۈندۇر. باشقا بىر قانچە CSS خۇسۇسىيىتىمۇ مۇشۇنىڭغا ئوخشاش سەۋەبلەر تۈپەيلىدىن تىزىش مەزمۇنىنى قۇرالايدۇ. تېخىمۇ چوڭقۇرلاپ باقماقچى بولسىڭىز MDN تولۇق تىزىملىك بىلەن تەمىنلەيدۇ. بۇ يەردە خېلى كۆپلىرى بار ، بۇ پەقەت بىلمەي تۇرۇپلا ئېھتىياتسىزلىقتىن تىزىش مۇھىتىنى يارىتىشنىڭ قانچىلىك ئاسانلىقىنى چۈشەندۈرۈپ بېرىدۇ. «يېشىش» مەسىلىسى تىزىش مەسىلىسى نۇرغۇن سەۋەبلەر تۈپەيلىدىن كېلىپ چىقىشى مۇمكىن ، ئەمما بەزىلىرى باشقىلارغا قارىغاندا كۆپ ئۇچرايدۇ. مودېل زاپچاسلىرى كلاسسىك ئەندىزە ، چۈنكى ئۇلار زاپچاسنى باشقا بارلىق ئېلېمېنتلارنىڭ ئۈستىدىكى ئۈستۈنكى قەۋەتتە «ئېچىش» نى تەلەپ قىلىدۇ ، ئاندىن «يېپىق» بولغاندا ئۇنى ئۈستۈنكى قەۋەتتىن چىقىرىۋېتىدۇ. مەن ھەممىمىزنىڭ مودېل ئاچقان ۋە ھەر قانداق سەۋەب بىلەن كۆرۈنمەيدىغان ئەھۋالغا چۈشۈپ قالغانلىقىغا ئىشىنىمەن. ئۇ توغرا ئېچىلمىغانلىقىدا ئەمەس ، بەلكى ئۇ قاتلاملىق مۇھىتنىڭ تۆۋەن قاتلىمىدا كۆرۈنمەيدۇ. بۇ سىزنى «قانداق كېلىدۇ؟» دەپ ئويلايدۇ. تەڭشەلگەندىن باشلاپ:
.overlay { ئورنى: مۇقىم; / * تىزىش مەزمۇنىنى ھاسىل قىلىدۇ * / z-index: 1; / * ئېلېمېنتنى ھەممە نەرسىدىن ئۈستۈن ئورۇنغا قويىدۇ * / inset: 0; كەڭلىكى: 100%; ئېگىزلىكى: 100vh; overflow: hidden; background-color: # 00000080; }
بۇ قارىماققا توغرادەك قىلىدۇ ، ئەمما ئەگەر مودېل قوزغاتقۇچنى ئۆز ئىچىگە ئالغان ئانا ئېلېمېنت باشقا ئانا ئېلېمېنت ئىچىدىكى بالىلار ئېلېمېنتى بولسا z-index: 1 گە تەڭشەلگەن بولسا ، تېخنىكىلىق ھالدا مودېلنى ئاساسلىق ھۆججەت قىسقۇچ تەرىپىدىن يېپىپ قويۇلغان تارماق ئورۇنغا قويىدۇ. قېنى بىز بۇ ئالاھىدە سىنارىيە ۋە باشقا بىر قانچە كۆپ ئۇچرايدىغان تىزىش مەزمۇنىنى كۆرۈپ باقايلى. مېنىڭچە ، ئېھتىياتسىزلىقتىن تىزىش مەزمۇنىنى قۇرۇشنىڭ قانچىلىك ئاسانلىقىنىلا ئەمەس ، بەلكى ئۇلارنى قانداق باشقۇرۇشنىمۇ كۆرىسىز. شۇنداقلا ، باشقۇرۇلىدىغان ھالەتكە قانداق قايتىشىڭىز ئەھۋالغا باغلىق. 1-خىل ئەھۋال: قاپسىلىپ قالغان مودېل
مودېلىڭىزنىڭ تۆۋەن قاتلامدا قاپسىلىپ قالغانلىقىنى دەرھال كۆرەلەيسىز ۋە ئاتا-ئانىسىنى پەرقلەندۈرەلەيسىز. توركۆرگۈ كېڭەيتىلمىسى ئەقلىي ئىقتىدارلىق پروگراممېرلار ياردەم ئۈچۈن كېڭەيتىش قۇردى. مۇشۇنىڭغا ئوخشاش قوراللار «CSS تىزىش مەزمۇنىنى تەكشۈرگۈچى» Chrome كېڭەيتىلمىسى DevTools غا قوشۇمچە z كۆرسەتكۈچ بەتكۈچى قوشۇپ ، سىزگە تىزىش مۇھىتى ھاسىل قىلىدىغان ئېلېمېنتلار ھەققىدىكى ئۇچۇرلارنى كۆرسىتىدۇ.
IDE كېڭەيتىلمىسى سىز ھەتتا تەرەققىيات جەريانىدا مەسىلىلەرنى VS كودىغا ئوخشاش كېڭەيتىش ئارقىلىق بايقىيالايسىز ، بۇ بىۋاسىتە تەھرىرلىگۈچتىكى يوشۇرۇن مەزمۇن مەسىلىلىرىنى گەۋدىلەندۈرىدۇ.
يېشىش ۋە كونترولنى ئەسلىگە كەلتۈرۈش بىز بۇنىڭ سەۋەبىنى ئېنىقلىغاندىن كېيىن ، كېيىنكى قەدەمدە ئۇنى بىر تەرەپ قىلىش. بۇ مەسىلىنى ھەل قىلىش ئۈچۈن قوللىنىدىغان بىر قانچە خىل ئۇسۇل بار ، مەن ئۇلارنى تەرتىپلىك تىزىپ چىقىمەن. سىز ھەر قانداق ئادەمنى خالىغانچە تاللىيالايسىز. ھېچكىم باشقىلاردىن ئاغرىنمايدۇ ياكى توسقۇنلۇق قىلالمايدۇ. HTML قۇرۇلمىسىنى ئۆزگەرتىڭ بۇ ئەڭ ياخشى ئوڭشاش دەپ قارىلىدۇ. بىر قاتار مەزمۇن مەسىلىسىگە يولۇقۇشىڭىز ئۈچۈن ، چوقۇم بەزى ئېلېمېنتلارنى HTML نىڭ ئىچىدە قىزىقارلىق ئورۇنغا قويغان بولۇشىڭىز كېرەك. بۇ بەتنى قايتا قۇرۇش سىزنىڭ DOM نى قايتا تەشكىللىشىڭىزگە ياردەم بېرىدۇ ھەمدە تىزىش مۇھىتى مەسىلىسىنى تۈگىتىدۇ. مەسىلە بار ئېلېمېنتنى تېپىپ HTML بەلگىسىدىكى تۇزاق ئېلېمېنتىدىن ئېلىڭ. مەسىلەن ، .modal- كونتېينېرنى ماۋزۇدىن يۆتكەپ ، ئۇنى
ئېلېمېنتىغا ئۆزى قويۇش ئارقىلىق بىرىنچى خىل ئەھۋال «قاپسىلىپ قالغان مودېل» نى ھەل قىلالايمىز. بۇ مەزمۇننىڭ z- كۆرسەتكۈچى 2 بولۇپ ، يەنىلا مودېلنى ئۆز ئىچىگە ئالمايدۇ. بەت بېشى
ئاساسلىق مەزمۇن
«مودېلنى ئېچىش» كۇنۇپكىسىنى باسسىڭىز ، مودېل كۆڭۈلدىكىدەك ھەممە نەرسىنىڭ ئالدىدا تۇرىدۇ. قەلەم 1-سىنارىيەگە قاراڭ: شويومبو گابرىئېل ئايومىد تەرىپىدىن قاپسىلىپ قالغان مودېل (ھەل قىلىش چارىسى). تەڭشەشCSS دىكى ئاتا-ئانىلارنىڭ مەزمۇنى ئەگەر ئېلېمېنت ئورۇنلاشتۇرۇشنى بۇزماي تۇرۇپ يۆتكىگىلى بولمايدىغان بولسا قانداق بولار؟ بۇ مەسىلىنى ھەل قىلىش ئەۋزەل: ئاتا-ئانا مەزمۇننى بېكىتىدۇ. مەزمۇننى قوزغىتىشقا مەسئۇل CSS خاسلىقى (ياكى خاسلىقى) نى تېپىپ ئېلىۋېتىڭ. ئەگەر ئۇنىڭ مەقسىتى بولسا ھەمدە ئېلىۋەتكىلى بولمىسا ، ئاتا-ئانىغا بارلىق قاچىلارنى كۆتۈرۈش ئۈچۈن ئاكا-ئۇكا ئېلېمېنتلىرىغا قارىغاندا تېخىمۇ يۇقىرى z كۆرسەتكۈچ قىممىتى بېرىڭ. Z- كۆرسەتكۈچ قىممىتى تېخىمۇ يۇقىرى بولغاندا ، ئانا قاچا ئۈستىگە يۆتكىلىدۇ ، بالىلىرى ئىشلەتكۈچىگە تېخىمۇ يېقىن كۆرۈنىدۇ. بىز «سۇغا چۆكۈش» سىنارىيەسىدە ئۆگەنگەنلىرىمىزگە ئاساسەن ، چۈشۈشنى دېڭىز قىرغىقىدىن يۆتكىۋېتەلمەيمىز. بۇنىڭ ئەھمىيىتى يوق. قانداقلا بولمىسۇن ، .navbar قاچىنىڭ z- كۆرسەتكۈچ قىممىتىنى. مەزمۇن ئېلېمېنتىنىڭ z كۆرسەتكۈچ قىممىتىدىن چوڭ قىلالايمىز. .navbar { تەگلىك: # 333; / * z-index: 1; * / z-index: 3; ئورنى: تۇغقان }
بۇ ئۆزگىرىش بىلەن .dropdown-menu ھازىر ھېچقانداق مەسىلە يوق مەزمۇننىڭ ئالدىدا كۆرۈنىدۇ.
قەلەم 2-سىنارىيەگە قاراڭ: شويومبو گابرىئېل ئايومىد تەرىپىدىن سۇغا چۆكۈش (ھەل قىلىش چارىسى).
ئەگەر رامكا ئىشلىتىۋاتقان بولسىڭىز ، پورتاللارنى سىناپ بېقىڭ
React ياكى Vue غا ئوخشاش رامكىلاردا ، بىر ئېغىز ئىقتىدار سىزنىڭ DOM دىكى نورمال ئاتا-ئانىلار قاتلىمىدىن باشقا زاپچاسلارنى تەمىنلىيەلەيدىغان ئىقتىدار. پورتاللار زاپچاسلىرىڭىز ئۈچۈن تېلېگراف ئۈسكۈنىسىگە ئوخشايدۇ. ئۇلار سىزگە ھۆججەتنىڭ خالىغان يېرىدە (ئادەتتە ھۆججەتكە توغرا كېلىدۇ) بىر بۆلەكنىڭ HTML ھۆججىتىنى بېرىدۇ ، شۇنىڭ بىلەن بىر ۋاقىتتا ئۇنى ئەسلىدىكى ئاتا-ئانىسىغا تىرەك ، ھالەت ۋە ۋەقەلەر ئۈچۈن لوگىكىلىق باغلايدۇ. بۇ قىستۇرما مەزمۇن توزىقىدىن قېچىشقا تولىمۇ ماس كېلىدۇ ، چۈنكى كۆرسىتىلگەن مەھسۇلات ھەقىقىي مەنىدىكى مەسىلە بار ئانا قاچىنىڭ سىرتىدا كۆرۈلىدۇ.
ReactDOM.createPortal (
ئاتا-ئانىلار تولۇپ تاشقان تەقدىردىمۇ ، چۈشۈش مەزمۇنىنىڭ ئاتا-ئانىسىنىڭ ئارقىسىغا يوشۇرۇنماسلىقىغا كاپالەتلىك قىلىدۇ: يوشۇرۇن ياكى تۆۋەن z كۆرسەتكۈچ. بىز ئىلگىرى كۆرۈپ باققان «كېسىلگەن قورال قورال» سىنارىيەسىدە ، مەن بىر پورتېرالنى ئىشلىتىپ قورال قوراللىرىنى ئېقىپ كېتىشتىن قۇتۇلدۇردۇم: يوشۇرۇن قىسقۇچنى ھۆججەت گەۋدىسىگە قويۇپ ، قاچىنىڭ ئىچىدىكى قوزغاتقۇچنىڭ ئۈستىگە قويۇپ. قەلەم 3-سىنارىيەگە قاراڭ: Shoyombo Gabriel Ayomide تەرىپىدىن كېسىلگەن قورال قورال (ھەل قىلىش چارىسى). قوشۇمچە ئۈنۈمسىز تىزىش مەزمۇنىنى تونۇشتۇرۇش ئالدىنقى بۆلەكتە چۈشەندۈرۈلگەن بارلىق ئۇسۇللار مەسىلە بار دۆۋىلەش مەزمۇنىدىكى ئېلېمېنتلارنى «يېشىش» نى مەقسەت قىلىدۇ ، ئەمما بەزى ئەھۋاللاردا سىز ئېھتىياجلىق ياكى تىزىش مۇھىتى قۇرماقچى بولغان ئەھۋاللار بار. يېڭى تىزىش مۇھىتى قۇرۇش ئاسان ، ئەمما بارلىق ئۇسۇللار ئەكىس تەسىر بىلەن كېلىدۇ. يەنى يالغۇزلۇق ئىشلىتىشتىن باشقا: ئايرىۋېتىش. بىر ئېلېمېنتقا قوللىنىلغاندا ، ئۇ ئېلېمېنتنىڭ بالىلىرىنىڭ تىزىش مەزمۇنى ئۇنىڭ سىرتىدىكى ئېلېمېنتلارنىڭ تەسىرىگە ئۇچرىماستىن ، بەلكى ھەر بىر بالىغا ۋە شۇ دائىرىدە بەلگىلىنىدۇ. كلاسسىك مىسال ئۇ ئېلېمېنتنى z- كۆرسەتكۈچ: -1 دېگەندەك سەلبىي قىممەتكە تەقسىملەش. ئۆزىڭىزنىڭ .card زاپچاسلىرى بارلىقىنى تەسەۋۋۇر قىلىپ بېقىڭ. سىز كارتا كارتىسىنىڭ تېكىستىنىڭ كەينىگە ، ئەمما كارتىنىڭ تەگلىكىنىڭ ئۈستىگە زىننەتلەش شەكلىنى قوشماقچى. كارتىغا تىزىش مەزمۇنى بولمىسا ، z-index: -1 شەكىلنى يىلتىز تىزىش مەزمۇنىنىڭ ئاستىغا (پۈتۈن بەت) ئەۋەتىدۇ. بۇ ئۇنى كارتىنىڭ ئاق تەگلىكىنىڭ ئارقىسىدا غايىب قىلىدۇ: Shoyombo Gabriel Ayomide نىڭ قەلەم مەنپىي z كۆرسەتكۈچى (مەسىلە) گە قاراڭ. بۇنى ھەل قىلىش ئۈچۈن ، بىز يالغۇزلۇقنى جاكارلايمىز: ئاتا-ئانىغا ئايرىۋېتىڭ. كارتا: Shoyombo Gabriel Ayomide نىڭ قەلەم مەنپىي z كۆرسەتكۈچى (ھەل قىلىش چارىسى) گە قاراڭ. ھازىر .card ئېلېمېنتىنىڭ ئۆزى بىر خىل مەزمۇنغا ئايلىنىدۇ. ئۇنىڭ بالا ئېلېمېنتى - ساختا ئېلېمېنتتىن بۇرۇن ياسالغان بېزەك شەكلى z- كۆرسەتكۈچ: -1 بولغاندا ، ئۇ ئاتا-ئانىلارنىڭ تىزىش مەزمۇنىنىڭ ئەڭ ئاستىغا كىرىدۇ. ئۇ تېكىستنىڭ ئارقىسىدا ۋە كارتا ئارقا سۇپىسىنىڭ ئۈستىدە مۇكەممەل ئورۇنلاشتۇرۇلغان. خۇلاسە ئېسىڭىزدە تۇتۇڭ: كېلەر قېتىم z- كۆرسەتكۈچىڭىز كونتروللۇقتىن چىققاندا ، ئۇ قاپسىلىپ قالغان مەزمۇن. پايدىلانما
تىزىش مەزمۇنى (MDN) Z- كۆرسەتكۈچ ۋە تىزىش مەزمۇنى (web.dev) ناتالى پىنا: «CSS دىكى يېگانە مۈلۈك بىلەن قانداق قىلىپ يېڭى بىر مەزمۇننى بارلىققا كەلتۈرىمىز؟ جوش كوماۋ: «زادى نېمە ، z- كۆرسەتكۈچ ??»
SmashingMag دا داۋاملىق ئوقۇش
ستېۋېن فرىسون: «چوڭ تۈرلەردە CSS Z كۆرسەتكۈچىنى باشقۇرۇش» فىلىپ براۋن: «يېپىشقاق باش ۋە تولۇق ئېگىزلىكتىكى ئېلېمېنتلار: قىيىن بىرىكمە» Pavel Pomerantsev: «زاپچاسنى ئاساس قىلغان تور قوللىنىشچان پروگراممىسىدا Z كۆرسەتكۈچىنى باشقۇرۇش» لۇيىس لازارىس: «Z- كۆرسەتكۈچ CSS مۈلكى: ئەتراپلىق قاراش»
