האָבן איר אלץ שטעלן ז-אינדעקס: 99999 אויף אַן עלעמענט אין דיין CSS, און עס קומט נישט אויף שפּיץ פון אנדערע עלעמענטן? א ווערט אַז גרויס זאָל לייכט שטעלן דעם עלעמענט וויזשוואַלי אויף שפּיץ פון עפּעס אַנדערש, אַסומינג אַלע די פאַרשידענע עלעמענטן זענען באַשטימט אין אַ נידעריקער ווערט אָדער נישט שטעלן אין אַלע. א וועב בלאַט איז יוזשאַוואַלי רעפּריזענטיד אין אַ צוויי-דימענשאַנאַל פּלאַץ; אָבער, דורך אַפּלייינג ספּעציפיש CSS פּראָפּערטיעס, אַ ויסגעטראַכט ז-אַקס פלאַך איז באַקענענ צו קאַנוויי טיפקייַט. דער פלאַך איז פּערפּענדיקולאַר צו די פאַרשטעלן, און דער באַניצער באמערקט די סדר פון עלעמענטן, איינער אויף די אנדערע. דער געדאַנק הינטער די ויסגעטראַכט ז-אַקס, דער באַניצער 'ס מערקונג פון סטאַקט עלעמענטן, איז אַז די CSS פּראָפּערטיעס וואָס מאַכן עס פאַרבינדן צו פאָרעם וואָס מיר רופן אַ סטאַקינג קאָנטעקסט. מיר וועלן רעדן וועגן ווי עלעמענטן זענען "סטאַקט" אויף אַ וועבזייטל, וואָס קאָנטראָלס די סטאַקינג סדר, און פּראַקטיש אַפּראָוטשיז צו "אַנסטאַק" עלעמענטן ווען דארף. וועגן סטאַקינג קאַנטעקסץ ימאַדזשאַן דיין וועבזייטל ווי אַ שרייַבטיש. ווען איר לייגן HTML עלעמענטן, איר לייגן שטיק פון פּאַפּיר, איינער נאָך די אנדערע, אויף די שרייַבטיש. די לעצטע שטיק פון פּאַפּיר געשטעלט איז עקוויוואַלענט צו די מערסט לעצטנס צוגעלייגט HTML עלעמענט, און עס זיצט אויף שפּיץ פון אַלע די אנדערע צייטונגען געשטעלט איידער עס. דאָס איז דער נאָרמאַל דאָקומענט לויפן, אפילו פֿאַר נעסטעד עלעמענטן. דער שרייַבטיש זיך רעפּראַזענץ די וואָרצל סטאַקינג קאָנטעקסט, געשאפן דורך די עלעמענט, וואָס כּולל אַלע אנדערע פאָלדערס. איצט, ספּעציפיש CSS פּראָפּערטיעס קומען אין שפּיל. פּראָפּערטיעס ווי שטעלע (מיט ז-אינדעקס), אָופּאַסאַטי, יבערמאַכן און אַנטהאַלטן) אַקט ווי אַ טעקע. דער טעקע נעמט אַן עלעמענט און אַלע זיין קינדער, עקסטראַקץ זיי פון די הויפּט אָנלייגן, און גרופּעס זיי אין אַ באַזונדער סאַב-סטאַק, קריייטינג וואָס מיר רופן אַ סטאַקינג קאָנטעקסט. פֿאַר פּאַזישאַנד עלעמענטן, דאָס כאַפּאַנז ווען מיר דערקלערן אַ ז-אינדעקס ווערט אנדערע ווי אַוטאָ. פֿאַר פּראָפּערטיעס ווי אָופּאַסאַטי, יבערמאַכן און פילטער, די סטאַקינג קאָנטעקסט איז אויטאָמאַטיש באשאפן ווען ספּעציפיש וואַלועס זענען געווענדט.
פּרוּווט צו פֿאַרשטיין דעם: אַמאָל אַ שטיק פון פּאַפּיר (ד"ה אַ קינד עלעמענט) איז ין אַ טעקע (ד"ה, די סטאַקינג קאָנטעקסט פון דער פאָטער), עס קען קיינמאָל אַרויסגאַנג דעם טעקע אָדער זיין געשטעלט צווישן צייטונגען אין אַ אַנדערש טעקע. זיין ז-אינדעקס איז איצט בלויז באַטייַטיק אין זיין אייגענע טעקע.
אין דער געמעל אונטן, פּאַפּיר ב איז איצט אין די סטאַקינג קאָנטעקסט פון טעקע ב, און קענען זיין אָרדערד בלויז מיט אנדערע צייטונגען אין דער טעקע.
ימאַדזשאַן, אויב איר ווילט, אַז איר האָבן צוויי פאָלדערס אויף דיין שרייַבטיש:
.פאָלדער-אַ {ז-אינדעקס: 1; } .פאָלדער-ב {ז-אינדעקס: 2; }
זאל ס דערהייַנטיקן די מאַרקאַפּ אַ ביסל. אינעווייניק פאָלדער א איז אַ ספּעציעל בלאַט, ז-אינדעקס: 9999. ין פאָלדער ב איז אַ קלאָר בלאַט, ז-אינדעקס: 5.
.ספּעציעל-בלאַט {ז-אינדעקס: 9999; } .פּלאַין-בלאַט {ז-אינדעקס: 5; }
וואָס בלאַט איז אויף שפּיץ? עס איז די .פּלאַין-בלאַט אין פאָלדער ב. דער בלעטערער איגנאָרירט די קינד צייטונגען און סטאַקס די צוויי פאָלדערס ערשטער. עס זעט טעקע ב (ז-אינדעקס: 2) און שטעלן עס אויף שפּיץ פון טעקע א (ז-אינדעקס: 1) ווייַל מיר וויסן אַז צוויי איז גרעסער ווי איין. דערווייַל, די .ספּעציעלע-בלאַט שטעלן צו ז-אינדעקס: 9999 בלאַט איז אין די דנאָ פון די אָנלייגן, כאָטש זייַן ז-אינדעקס איז באַשטימט צו די העכסטן מעגלעך ווערט. סטאַקינג קאַנטעקסץ קענען אויך זיין נעסטעד (פאָלדערס ין פאָלדערס), קריייטינג אַ "משפּחה בוים." דער זעלביקער פּרינציפּ אַפּלייז: אַ קינד קענען קיינמאָל אַנטלויפן זיין עלטערן 'פאָלדער. איצט אַז איר באַקומען ווי סטאַקינג קאַנטעקסץ ביכייווז ווי פאָלדערס וואָס גרופּע און ריאָרדער לייַערס, עס איז ווערט צו פרעגן: פארוואס מאַכן זיכער פּראָפּערטיעס - ווי יבערמאַכן און אָופּאַסאַטי - נייַע סטאַקינג קאַנטעקסץ? דאָ ס די זאַך: די פּראָפּערטיעס טאָן ניט מאַכן סטאַקינג קאַנטעקסץ ווייַל פון ווי זיי קוקן; זיי טאָן דאָס ווייַל פון ווי דער בלעטערער אַרבעט אונטער די קאַפּטער. ווען איר צולייגן יבערמאַכן, אָופּאַסאַטי, פילטער אָדער פּערספּעקטיוו, איר זאָגן דעם בלעטערער, "היי, דעם עלעמענט קען מאַך, דרייען אָדער וועלקן, אַזוי זיין גרייט!"
ווען איר נוצן די פּראָפּערטיעס, דער בלעטערער קריייץ אַ נייַ סטאַקינג קאָנטעקסט צו פירן רענדערינג מער יפישאַנטלי. דאָס אַלאַוז דער בלעטערער צו שעפּן אַנאַמיישאַנז, טראַנספאָרמז און וויזשאַוואַל יפעקץ ינדיפּענדאַנטלי, רידוסינג די נויט צו ריקאַלקיאַלייט ווי די עלעמענטן ינטעראַקט מיט די רעשט פון די בלאַט. טראַכטן וועגן דעם ווי דער בלעטערער זאגט, "איך וועל שעפּן דעם טעקע סעפּעראַטלי אַזוי איך טאָן ניט האָבן צו רישאַפאַל די גאנצע שרייַבטיש יעדער מאָל עפּעס אין עס ענדערונגען." אבער עס סאַ זייַט ווירקונג. אַמאָל דער בלעטערער ליפץ אַן עלעמענט אין זיין אייגענע שיכטע, עס מוזן "פלאַטאַן" אַלץ אין עס, קריייטינג אַ נייַ סטאַקינג קאָנטעקסט. עס איז ווי צו נעמען אַ טעקע אַוועק די שרייַבטיש צו שעפּן עס סעפּעראַטלי; אַלץ ין דער טעקע איז גרופּט, און דער בלעטערער איצט טריץ עס ווי אַ איין אַפּאַראַט ווען איר באַשליסן וואָס איז אויף שפּיץ פון וואָס. אפילו כאָטש די פּראָפּערטיעס פון די יבערמאַכן און אָופּאַסאַטי קען נישט ווירקן די וויזשוואַלי אָנלייגן פון עלעמענטן, זיי טאָן דאָס, און דאָס איז פֿאַר פאָרשטעלונג אַפּטאַמאַזיישאַן. עטלעכע אנדערע CSS פּראָפּערטיעס קענען אויך שאַפֿן סטאַקינג קאַנטעקסץ פֿאַר ענלעך סיבות. MDN גיט אַ גאַנץ רשימה אויב איר ווילן צו גראָבן דיפּער. עס זענען גאַנץ אַ ביסל, וואָס בלויז ילאַסטרייץ ווי גרינג עס איז צו ינאַדווערטאַנטלי שאַפֿן אַ סטאַקינג קאָנטעקסט אָן וויסן עס. די "אַנסטאַקינג" פּראָבלעם סטאַקינג ישוז קענען אויפשטיין פֿאַר פילע סיבות, אָבער עטלעכע זענען מער געוויינטלעך ווי אנדערע. מאָדאַל קאַמפּאָונאַנץ זענען אַ קלאַסיש מוסטער ווייַל זיי דאַרפן טאַגאַלינג די קאָמפּאָנענט צו "עפענען" אויף אַ שפּיץ שיכטע אויבן אַלע אנדערע עלעמענטן, און רימוווינג עס פון די שפּיץ שיכטע ווען עס איז "פארמאכט." איך בין גאַנץ זיכער אַז אַלע פון אונדז האָבן אַ סיטואַציע ווו מיר עפענען אַ מאָדאַל און, פֿאַר וועלכער סיבה, עס קען נישט דערשייַנען. עס איז נישט אַז עס איז נישט אָופּאַנד רעכט, אָבער אַז עס איז אויס פון מיינונג אין אַ נידעריקער שיכטע פון די סטאַקינג קאָנטעקסט. דאָס לאָזן איר צו ווונדער "ווי קומט?" זינט איר שטעלן:
.אָווערליי { שטעלע: פאַרפעסטיקט; /* קריייץ די סטאַקינג קאָנטעקסט */ ז-אינדעקס: 1; /* שטעלט דעם עלעמענט אויף אַ שיכטע העכער אַלץ אַנדערש */ ינסעט: 0; ברייט: 100%; הייך: 100ווה; איבערפלוס : פארבארגן ; הינטערגרונט-קאָליר: #00000080; }
דאָס קוקט ריכטיק, אָבער אויב דער פאָטער עלעמענט מיט די מאָדאַל צינגל איז אַ קינד עלעמענט אין אן אנדער פאָטער עלעמענט וואָס איז אויך באַשטימט צו ז-אינדעקס: 1, וואָס טעקניקלי שטעלן די מאָדאַל אין אַ סובלייַער אַבסקיורד דורך די הויפּט טעקע. זאל ס קוק אין דעם ספּעציפיש סצענאַר און אַ פּאָר פון אנדערע פּראָסט סטאַקינג-קאָנטעקסט פּיטפאָלז. איך טראַכטן איר וועט זען ניט בלויז ווי גרינג עס איז צו ינאַדווערטאַנטלי שאַפֿן סטאַקינג קאַנטעקסץ, אָבער אויך ווי צו מיסמאַנידזש זיי. אויך, ווי איר צוריקקומען צו אַ געראטן שטאַט דעפּענדס אויף די סיטואַציע. סצענאַר 1: די טראַפּט מאָדאַל
איר קענט גלייך זען דיין מאָדאַל טראַפּט אין אַ נידעריק-מדרגה שיכטע און ידענטיפיצירן די פאָטער. בלעטערער יקסטענשאַנז סמאַרט דעוועלאָפּערס האָבן געבויט יקסטענשאַנז צו העלפן. מכשירים ווי דעם "CSS Stacking Context Inspector" קראָום פאַרלענגערונג לייגן אַן עקסטרע ז-אינדעקס קוויטל צו דיין DevTools צו ווייַזן איר אינפֿאָרמאַציע וועגן עלעמענטן וואָס שאַפֿן אַ סטאַקינג קאָנטעקסט.
IDE יקסטענשאַנז איר קענען אפילו געפֿינען ישוז בעשאַס אַנטוויקלונג מיט אַן פאַרלענגערונג ווי דעם פֿאַר VS קאָד, וואָס כיילייץ פּאָטענציעל סטאַקינג קאָנטעקסט ישוז גלייך אין דיין רעדאַקטאָר.
ונסטאַקינג און ריגיינינג קאָנטראָל נאָך מיר האָבן יידענאַפייד די וואָרצל גרונט, דער ווייַטער שריט איז צו האַנדלען מיט עס. עס זענען עטלעכע אַפּראָוטשיז איר קענען נעמען צו מאַכנ דעם פּראָבלעם, און איך וועט רשימה זיי אין סדר. איר קענען קלייַבן ווער עס יז אין קיין מדרגה, כאָטש; קיינער קען נישט באַקלאָגן זיך אָדער שטערן דעם אנדערן. טוישן די HTML סטרוקטור דעם איז געהאלטן די אָפּטימאַל פאַרריכטן. פֿאַר איר צו לויפן אין אַ סטאַקינג קאָנטעקסט אַרויסגעבן, איר מוזן האָבן געשטעלט עטלעכע עלעמענטן אין מאָדנע שטעלעס אין דיין HTML. ריסטראַקטשערינג די בלאַט וועט העלפֿן איר רישאַפּע די DOM און עלימינירן די סטאַקינג קאָנטעקסט פּראָבלעם. געפֿינען די פּראָבלעמאַטיק עלעמענט און באַזייַטיקן עס פון די טראַפּינג עלעמענט אין די HTML מאַרקאַפּ. פֿאַר בייַשפּיל, מיר קענען סאָלווע דער ערשטער סצענאַר, "די טראַפּט מאָדאַל," דורך מאָווינג די .מאָדאַל-קאָנטאַינער אויס פון די כעדער און פּלייסינג עס אין די <גוף> עלעמענט דורך זיך.
דער אינהאַלט האט אַ ז-אינדעקס פון 2 און וועט נאָך נישט דעקן די מאָדאַל.כעדער
הויפּט אינהאַלט
ווען איר גיט די "עפֿן מאָדאַל" קנעפּל, די מאָדאַל איז פּאַזישאַנד אין פראָנט פון אַלץ אַנדערש ווי עס איז געמיינט צו זיין. זען די פּען סצענאַר 1: די טראַפּט מאָדאַל (סאַלושאַן) [פאָרקעד] דורך Shoyombo Gabriel Ayomide. סטרויערן דיפּאַרענט סטאַקינג קאָנטעקסט אין CSS וואָס אויב דער עלעמענט איז איינער איר קענען נישט מאַך אָן ברייקינג די אויסלייג? עס איז בעסער צו אַדרעס דעם אַרויסגעבן: דער פאָטער יסטאַבלישיז דעם קאָנטעקסט. געפֿינען די CSS פאַרמאָג (אָדער פּראָפּערטיעס) פאַראַנטוואָרטלעך פֿאַר טריגערינג דעם קאָנטעקסט און באַזייַטיקן עס. אויב עס האט אַ ציל און קענען ניט זיין אַוועקגענומען, געבן די פאָטער אַ העכער ז-אינדעקס ווערט ווי זיין סיבלינג עלעמענטן צו הייבן די גאנצע קאַנטיינער. מיט אַ העכער ז-אינדעקס ווערט, דער פאָטער קאַנטיינער באוועגט צו די שפּיץ, און זיין קינדער דערשייַנען נעענטער צו דער באַניצער. באַזירט אויף וואָס מיר געלערנט אין "די סאַבמערדזשד דראָפּדאָוון" סצענאַר, מיר קענען נישט מאַך די דראָפּדאָוון פון די נאַוובאַר; עס וואָלט נישט מאַכן זינען. אָבער, מיר קענען פאַרגרעסערן די ז-אינדעקס ווערט פון די .נאַוובאַר קאַנטיינער צו זיין גרעסער ווי די ז-אינדעקס ווערט פון די . אינהאַלט עלעמענט. .navbar { הינטערגרונט: #333; /* ז-אינדעקס: 1; */ ז-אינדעקס: 3; שטעלע: קאָרעוו; }
מיט דעם ענדערונג, די .דראָפּדאָוון-מעניו איצט אויס אין פראָנט פון די אינהאַלט אָן קיין אַרויסגעבן. זען די פּען סצענאַר 2: די סאַבמערדזשד דראָפּדאָוון (סאַלושאַן) [פאָרקעד] דורך Shoyombo Gabriel Ayomide. פּרוּווט פּאָרטאַלס אויב איר נוצן אַ פריימווערק אין פראַמעוואָרקס ווי React אָדער Vue, אַ פּאָרטאַל איז אַ שטריך וואָס אַלאַוז איר צו מאַכן אַ קאָמפּאָנענט אַרויס זיין נאָרמאַל פאָטער כייעראַרקי אין די DOM. פּאָרטאַלס זענען ווי אַ טעלעפּאָרטאַטיאָן מיטל פֿאַר דיין קאַמפּאָונאַנץ. זיי לאָזן איר מאַכן HTML פון אַ קאָמפּאָנענט ערגעץ אין דעם דאָקומענט (טיפּיקלי רעכט אין document.body) בשעת איר האַלטן עס לאַדזשיקלי פארבונדן צו זיין אָריגינעל פאָטער פֿאַר פּראַפּס, שטאַט און געשעענישן. דאָס איז גאנץ פֿאַר יסקייפּינג סטאַקינג קאָנטעקסט טראַפּס זינט די רענדערד רעזולטאַט ממש אויס אַרויס די פּראָבלעמאַטיק פאָטער קאַנטיינער. ReactDOM.createPortal( <מכשיר עצה />, document.body );
דאָס ינשורז דיין דראָפּדאָוון אינהאַלט איז נישט פאַרבאָרגן הינטער זיין פאָטער, אפילו אויב דער פאָטער האט לויפן: פאַרבאָרגן אָדער אַ נידעריקער ז-אינדעקס. אין די "די קליפּט טאָאָלטיפּ" סצענאַר מיר געקוקט בייַ פריער, איך געוויינט אַ טויער צו ראַטעווען די טאָאָלטיפּ פון די אָוווערפלאָו: פאַרבאָרגן קלעמערל דורך פּלייסינג עס אין די דאָקומענט גוף און פּאַזישאַנינג עס אויבן די צינגל אין דעם קאַנטיינער. זען די פּען סצענאַר 3: די קליפּט טאָאָלטיפּ (סאַלושאַן) [פאָרקעד] דורך Shoyombo Gabriel Ayomide. ינטראָודוסינג סטאַקינג קאָנטעקסט אָן זייַט יפעקץ אַלע די אַפּראָוטשיז דערקלערט אין די פריערדיקע אָפּטיילונג זענען אַימעד צו "אַנסטאַקינג" עלעמענטן פֿון פּראָבלעמאַטיק סטאַקינג קאַנטעקסץ, אָבער עס זענען עטלעכע סיטואַטיאָנס ווו איר טאַקע דאַרפֿן אָדער ווילן צו שאַפֿן אַ סטאַקינג קאָנטעקסט. שאפן אַ נייַ סטאַקינג קאָנטעקסט איז גרינג, אָבער אַלע אַפּראָוטשיז קומען מיט אַ זייַט ווירקונג. אַז איז, אַחוץ פֿאַר ניצן אפגעזונדערטקייט: יזאָלירן. ווען געווענדט צו אַן עלעמענט, די סטאַקינג קאָנטעקסט פון די עלעמענט ס קינדער איז באשלאסן קאָרעוו צו יעדער קינד און אין דעם קאָנטעקסט, אלא ווי ינפלואַנסט דורך עלעמענטן אַרויס פון אים. א קלאַסיש בייַשפּיל איז אַסיינינג אַז עלעמענט אַ נעגאַטיוו ווערט, אַזאַ ווי ז-אינדעקס: -1. ימאַדזשאַן איר האָבן אַ .קאַרד קאָמפּאָנענט. איר ווילן צו לייגן אַ דעקאָראַטיווע פאָרעם וואָס זיצט הינטער די .קאַרד ס טעקסט, אָבער אויף שפּיץ פון די קאָרט ס הינטערגרונט. אָן אַ סטאַקינג קאָנטעקסט אויף די קאָרט, z-index: -1 סענדז די פאָרעם צו די דנאָ פון די וואָרצל סטאַקינג קאָנטעקסט (די גאנצע בלאַט). דאָס מאכט עס פאַרשווינדן הינטער די .קאַרד ס ווייַס הינטערגרונט: זען די פּען נעגאַטיוו ז-אינדעקס (פּראָבלעם) [פאָרקעד] דורך Shoyombo Gabriel Ayomide. צו סאָלווע דעם, מיר דערקלערן אפגעזונדערטקייט: יזאָלירן אויף די פאָטער .קאַרד: זען די פּען נעגאַטיוו ז-אינדעקס (לייזונג) [פאָרקעד] דורך Shoyombo Gabriel Ayomide. איצט, די .קאַרד עלעמענט זיך ווערט אַ סטאַקינג קאָנטעקסט. ווען זיין קינד עלעמענט - די דעקאָראַטיווע פאָרעם באשאפן אויף די: איידער פּסעוודאָ-עלעמענט - האט ז-אינדעקס: -1, עס גייט צו די דנאָ פון די פאָטער 'ס סטאַקינג קאָנטעקסט. עס זיצט בישליימעס הינטער דעם טעקסט און אויף שפּיץ פון די קאָרט ס הינטערגרונט, ווי בדעה. מסקנא געדענקט: דער ווייַטער מאָל דיין ז-אינדעקס סימז אויס פון קאָנטראָל, עס איז אַ טראַפּט סטאַקינג קאָנטעקסט. רעפערענצן
סטאַקינג קאָנטעקסט (MDN) ז-אינדעקס און סטאַקינג קאַנטעקסץ (web.dev) "ווי צו שאַפֿן אַ נייַ סטאַקינג קאָנטעקסט מיט די אפגעזונדערטקייט פאַרמאָג אין CSS", נאַטאַליע פּינאַ "וואָס די כעק, ז-אינדעקס?", Josh Comeau
ווייַטער לייענען אויף SmashingMag
"מאַנאַגינג CSS Z-Index אין גרויס פּראַדזשעקס", Steven Frieson "קלעפּיק כעדערז און עלעמענטן אין גאַנץ הייך: אַ טריקי קאָמבינאַציע," Philip Braunen "אָנפירונג ז-אינדעקס אין אַ קאָמפּאָנענט-באזירט וועב אַפּפּליקאַטיאָן", Pavel Pomerantsev "די Z-Index CSS פאַרמאָג: אַ פולשטענדיק קוק," Louis Lazaris
