פּאַזישאַנינג אָוווערלאַפּינג עלעמענץ מיט קאַסקאַדינג סטייל שיץ
איינער פון די טשאַלאַנדזשיז ווען ניצן CSS פּאַזישאַנינג פֿאַר וועב בלאַט אויסלייג איז אַז עטלעכע פון דיין עלעמענטן קען אָוווערלאַפּ אנדערע. דאס אַרבעט פייַן אויב איר ווילן די לעצטע עלעמענט אין דעם HTML צו זיין אויף שפּיץ, אָבער וואָס אויב איר טאָן ניט אָדער וואָס אויב איר ווילן צו האָבן עלעמענטן וואָס דערווייַל טאָן ניט אָוווערלאַפּ אנדערע צו טאָן אַזוי ווייַל די פּלאַן רופט פֿאַר דעם "לייערד" קוק ? אין סדר צו טוישן די וועגווייַזער אָוווערלאַפּ איר דאַרפֿן צו נוצן די פאַרמאָג פון קסס.
אויב איר'ווע געוויינט אַ גראַפיקס מכשירים אין וואָרט און פּאָווערפּאָינט אָדער מער געזונט בילד רעדאַקטאָר ווי אַדאָובי פאָטאָשאָפּ, דעמאָלט טשאַנסאַז זענען איר ווע געזען עפּעס ווי ז-אינדעקס אין קאַמף. אין די מגילה, איר קענען הויכפּונקט די כייפעץ (s) אַז איר האָט ציען, און קלייַבן אַן אָפּציע צו "שיקן צו צוריק" אָדער "ברענגען צו פראָנט" זיכער יסודות פון דיין דאָקומענט. אין פאָטאָשאָפּ, איר טאָן ניט האָבן די פאַנגקשאַנז, אָבער איר טאָן די "לייַער" שויב פון דעם פּראָגראַם און איר קענען צולייגן וואָס אַן עלעמענט פאלט אין די לייַוונט דורך ריינדזשינג די לייַערס. אין ביידע די ביישפילן, איר זענט יסענשאַלי באַשטעטיקן די ז-אינדעקס פון די אַבדזשעקס.
וואָס איז ז-אינדעקס?
ווען איר נוצן CSS פּאַזישאַנינג צו פּאָזיציע עלעמענטן אויף דעם בלאַט, איר דאַרפֿן צו טראַכטן אין דרייַ דימענשאַנז. עס זענען די צוויי נאָרמאַל דימענשאַנז: לינקס / רעכט און שפּיץ / דנאָ. די לינק צו רעכט אינדעקס איז באקאנט ווי די X-אינדעקס, אָבער די שפּיץ צו דנאָ איינער איז די י-אינדעקס. דעם איז ווי איר וואָלט פּאָסטן עלעמענטן כאָריזאַנטאַלי אָדער ווערטיקלי, ניצן די צוויי ינדעקסיז.
ווען אין קומט צו וועב פּלאַן, עס איז אויך די סטאַקינג סדר פון די בלאַט. יעדער עלעמענט אויף דער בלאַט קענען זיין לייערד אויבן אָדער אונטן קיין אנדערע עלעמענט. דער ז-אינדעקס פאַרמאָג באשטייט ווו אין דעם אָנלייגן יעדער עלעמענט איז. אויב רענטגענ-אינדעקס און י-אינדעקס זענען די האָריזאָנטאַל און ווערטיקאַל שורות, דער ז-אינדעקס איז די טיפקייַט פון די בלאַט, יסענשאַלי די 3 דימענשאַנז.
איך ווי צו טראַכטן פון די עלעמענטן אויף אַ וועבפּאַגע ווי ברעקלעך פון פּאַפּיר, און די וועב בלאַט זיך ווי אַ קאָללאַגע. ווו איך לייגן די פּאַפּיר איז באשלאסן דורך פּאָוסטינג, און ווי פיל פון עס איז באדעקט דורך די אנדערע עלעמענטן איז די ז-אינדעקס.
דער ז-אינדעקס איז אַ נומער, אָדער positive (למשל 100) אָדער נעגאַטיוו (למשל -100). די פעליקייַט ז-אינדעקס איז 0. דער עלעמענט מיט דעם העכסטן ז-אינדעקס איז אויבן, נאכגעגאנגען דורך די ווייַטער העכסטן און אַזוי אויף אַראָפּ צו די לאָואַסט ז-אינדעקס. אויב צוויי עלעמענטן האָבן די זעלבע ז-אינדעקס ווערט (אָדער עס איז ניט דיפיינד, טייַטש די נוצן די פעליקייַט ווערט פון 0) דער בלעטערער וועט שיכטן זיי אין די סדר זיי דערשייַנען אין די HTML.
ווי צו נוצן ז-אינדעקס
געבן יעדער עלעמענט איר ווילן אין דיין אָנלייגן אַ אַנדערש ז-אינדעקס ווערט. פֿאַר בייַשפּיל, אויב איך האָבן פינף פאַרשידענע עלעמענטן:
- עלעמענט 1 - ז-אינדעקס פון -25
- עלעמענט 2 - ז-אינדעקס פון 82
- עלעמענט 3 - ז-אינדעקס נישט שטעלן
- עלעמענט 4 - ז-אינדעקס פון 10
- עלעמענט 5 - ז-אינדעקס פון -3
זיי וועלן אָנלייגן אין די פאלגענדע סדר:
- עלעמענט 2
- element 4
- element 3
- element 5
- element 1
איך רעקאָמענדירן ניצן וואַסטלי אַנדערש ז-אינדעקס וואַלועס צו אָנלייגן דיין עלעמענטן. דעריבער, אויב איר לייגט מער עלעמענטן צו דער בלאַט שפּעטער, איר האָבן פּלאַץ צו שיכטן זיי אין אָן האָבן צו סטרויערן די ז-אינדעקס וואַלועס פון אַלע די אנדערע עלעמענטן. פֿאַר בייַשפּיל:
- 100 פֿאַר מיין שפּיץ-רובֿ עלעמענט
- 0 פֿאַר מיין מיטן עלעמענט
- -100 פֿאַר מיין דנאָ עלעמענט
איר קענען אויך געבן צוויי עלעמענטן דער זעלביקער ז-אינדעקס ווערט. אויב די יסודות זענען סטאַקט, זיי וועלן אַרויסווייַזן אין די סדר זיי זענען געשריבן אין די HTML, מיט די לעצט עלעמענט אויף שפּיץ.
איינער טאָן, פֿאַר אַן עלעמענט צו יפעקטיוולי נוצן די ז-אינדעקס פאַרמאָג, עס מוזן זיין אַ בלאָק מדרגה עלעמענט אָדער נוצן אַ ווייַז פון "בלאָק" אָדער "ינלינע-בלאָק" אין דיין קסס טעקע.
אָריגינעל אַרטיקל דורך דזשענניפער קרינן. Edited on 12/09/16 by Jeremy Girard.