אַבסאָלוט ווס קאָרעוו - עקספּלאַינינג CSS לאָקאַטיאָן

CSS שטעלע איז מער ווי נאָר רענטגענ, י קאָאָרדינאַטעס

CSS פּאַזישאַנינג האט לאַנג שוין אַ וויכטיק טייל פון שאפן וועבזייַטל לייאַוץ. אפילו מיט די העכערונג פון נייַער CSS אויסלייג טעטשניקוועס ווי פלעקסבאָקס און קסס גריד, פּאַזישאַנינג נאָך האט אַ וויכטיק אָרט אין קיין וועב דיזיינער ס זעקל פון טריקס.

ווען ניצן קסס פּאַזישאַנינג, די ערשטער זאַך וואָס איר דאַרפֿן צו טאָן איז צו שאַפֿן די CSS פאַרמאָג פֿאַר שטעלע צו זאָגן דעם בלעטערער אויב איר זענט געגאנגען צו נוצן אַבסאָלוט אָדער קאָרעוו פּאַזישאַנינג פֿאַר אַ געגעבן עלעמענט. איר אויך דאַרפֿן צו קלאר פֿאַרשטיין די חילוק צווישן די צוויי פּאַזישאַנינג פּראָפּערטיעס.

בשעת אַבסאָלוט און קאָרעוו זענען די צוויי CSS שטעלע פּראָפּערטיעס רובֿ אָפט געניצט אין וועב פּלאַן, עס זענען פאקטיש פיר שטאַטן צו די שטעלע פאַרמאָג:

• סטאַטיק
• אַבסאָלוט
• קאָרעוו
• fixed

סטאַטיק איז די פעליקייַט שטעלע פֿאַר קיין עלעמענט אויף אַ וועב בלאַט. אויב איר טאָן ניט דעפינירן די שטעלע פון ​​אַן עלעמענט, עס וועט זיין סטאַטיק. דעם מיטל אַז עס וועט אַרויסווייַזן אויף די פאַרשטעלן באזירט אויף ווו עס איז אין די HTML דאָקומענט און ווי עס וואָלט אַרויסווייַזן ין דער נאָרמאַל לויפן פון דעם דאָקומענט.

אויב איר פּאַסירן רעגיאַלייטינג כּללים ווי אויבן אָדער לינקס צו אַן עלעמענט מיט אַ סטאַטיק שטעלע, די כּללים וועט ווערן איגנאָרירט און די עלעמענט וועט בלייַבן ווו עס קומט אין נאָרמאַל דאָקומענט לויפן. אין אמת, איר וואָלט ראַרעלי, אויב אלץ, דאַרפֿן צו שטעלן אַן עלעמענט צו אַ סטאַטיק שטעלע אין קסס ווייַל דאָס איז די פעליקייַט ווערט.

אַבסאָלוט CSS לאָקאַטיאָן

אַבסאָלוט פּאַזישאַנינג איז מיסטאָמע די יזיאַסט קסס שטעלע צו פֿאַרשטיין. איר אָנהייבן מיט דעם קסס שטעלע פאַרמאָג:

שטעלע: אַבסאָלוט;

דעם ווערט דערציילט דעם בלעטערער אַז אַלץ איז געגאנגען צו זיין פּאַזישאַנד זאָל זיין אַוועקגענומען פון די נאָרמאַל לויפן פון דעם דאָקומענט און אַנשטאָט געשטעלט אין אַ פּינטלעך אָרט אויף דעם בלאַט. דעם איז קאַלקיאַלייטיד באזירט אויף אַז עלעמענט ס קלאָוסאַסט ניט-סטאַטיקלי פּאַזישאַנד אַנסעסטער.

ווייַל אַ לעגאַמרע פּאַזישאַנד עלעמענט איז אויס פון דער נאָרמאַל לויפן פון דעם דאָקומענט, עס וועט נישט ווירקן ווי די יסודות איידער עס אָדער נאָך עס אין די HTML זענען פּאַזישאַנד אויף די וועב בלאַט.

ווי אַ בייַשפּיל - אויב איר האט אַ טייל וואָס איז פּאַזישאַנינג ניצן אַ ווערט פון קאָרעוו (מיר וועלן קוקן בייַ דעם ווערט באַלד), און ין אַז די אָפּטייל איר האט אַ פּאַראַגראַף אַז איר געוואלט צו פּאָסטן 50 בילדצעלן פון די שפּיץ פון די אָפּטייל, איר וואָלט לייגן אַ שטעלע ווערט פון "אַבסאָלוט" צו אַז פּאַראַגראַף צוזאמען מיט אַן אָפסעט ווערט פון 50 פּקס אויף די "שפּיץ" פאַרמאָג, ווי דאָס.

שטעלע: אַבסאָלוט; שפּיץ: 50 פּקס;

דעם לעגאַמרע פּאַזישאַנד עלעמענט וואָלט שטענדיק אַרויסווייַזן 50 בילדצעלן פון די שפּיץ פון אַז לעפיערעך פּאַזישאַנד אָפּטייל - קיין ענין וואָס אַנדערש דיספּלייז דאָרט אין נאָרמאַל לויפן. דיין "לעגאַמרע" פּאַזישאַנד עלעמענט געניצט די לעפיערעך פּאַזישאַנד איינער ווי זייַן קאָנטעקסט און די פּאָסיטינג ווערט איר נוצן איז קאָרעוו אַז אַז.

די פיר פּאַזישאַנינג פּראָפּערטיעס אַז איר האָבן בנימצא צו נוצן זענען:

• אויבן
• רעכט
• bottom
• לינקס

איר קענען נוצן אָדער שפּיץ אָדער דנאָ (זינט אַן עלעמענט קענען ניט זיין פּאַזישאַנד לויט ביידע פון ​​די וואַלועס) און אָדער רעכט אָדער לינקס.

אויב אַן עלעמענט איז באַשטימט צו אַ שטעלע פון ​​אַבסאָלוט, אָבער דאָרט עס ניט קיין סטאַטיסטיש פּאַסטאַנעד אָוועס, דעמאָלט עס וועט זיין פּאַזישאַנד קאָרעוו צו די גוף עלעמענט, וואָס איז די העכסטן מדרגה עלעמענט פון די בלאַט.

Relative Positioning

מיר שוין דערמאנט קאָרעוו פּאַזישאַנינג, אַזוי לאָזן ס קוק בייַ אַז פאַרמאָג איצט.

רעלאַטיוו פּאַזישאַנינג ניצט די זעלבע פיר פּאַזישאַנינג פּראָפּערטיעס ווי אַבסאָלוט פּאַזישאַנינג, אָבער אַנשטאָט פון בייסינג די שטעלע פון ​​דעם עלעמענט אויף זייַן קלאָוסאַסט ניט-סטאַטיקלי פּאַסטאַנעד אַנסעסטער, עס סטאַרץ פון ווו דער עלעמענט וואָלט זיין אויב עס זענען נאָך אין די נאָרמאַל לויפן.

פֿאַר בייַשפּיל, אויב איר האָבן דרייַ פּאַראַגראַפס אויף דיין וועב בלאַט, און די דריט האט אַ "שטעלע: קאָרעוו" נוסח געשטעלט אויף עס, עס ס שטעלע וועט זיין פאָטאָ באזירט אויף דעם קראַנט אָרט.

<פּ> פּאַראַגראַף 1. <פּ> פּאַראַגראַף 2. <פּ סטיל = "שטעלע:

אין דער אויבן בייַשפּיל, די דריט פּאַראַגראַף וועט זיין פּאַזישאַנד 2 עם פון די לינקס זייַט פון די קאַנטיינער עלעמענט, אָבער וועט זיין ונטער דער ערשטער צוויי פּאַראַגראַפס. עס וואָלט בלייַבן אין די נאָרמאַל לויפן פון דעם דאָקומענט, און נאָר זיין אַ ביסל אַטמאָספער. אויב איר פארביטן עס צו שטעלע: אַבסאָלוט; עפּעס ווייַטערדיק עס וואָלט אַרויסווייַזן אויף שפּיץ פון עס, ווייַל עס וואָלט ניט מער זיין אין די נאָרמאַל לויפן פון די דאָקומענט.

עלעמענטן אויף אַ וועב בלאַט זענען אָפט געניצט צו שטעלן אַ ווערט פון שטעלע: קאָרעוו מיט קיין אָפסעט ווערט געגרינדעט, וואָס מיטל אַז עלעמענט בלייבט פּונקט ווו עס וואָלט דערשייַנען אין נאָרמאַל לויפן. דעם איז געטאן סאָוללי צו פאַרלייגן דעם עלעמענט ווי אַ קאָנטעקסט קעגן וואָס אנדערע יסודות קענען זיין פּאַזישאַנד לעגאַמרע. פֿאַר בייַשפּיל, אויב איר האָבן אַ אָפּטייל אַרום דיין גאנצע וועבזייַטל מיט אַ סאָרט ווערט פון "קאַנטיינער" (וואָס איז אַ זייער פּראָסט סצענאַר אין וועב דיזיין), די אָפּטייל קענען זיין באַשטימט צו אַ פּאָזיציע פון ​​קאָרעוו אַזוי אַז עפּעס אינעווייניק עס קענען נוצן עס איז ווי אַ פּאַזישאַנינג קאָנטעקסט.

וואָס וועגן פיקסט פּאָסיטיאָנינג?

פאַרפעסטיקט פּאַזישאַנינג איז פיל ווי אַבסאָלוט פּאַזישאַנינג. די שטעלע פון ​​דעם עלעמענט איז קאַלקיאַלייטאַד אין די זעלבע וועג ווי די אַבסאָלוט מאָדעל, אָבער פאַרפעסטיקט עלעמענטן זענען דעמאָלט פאַרפעסטיקט אין אַז אָרט כּמעט ווי אַ וואָטערמאַרק . אַלץ אַנדערש אויף דער בלאַט וועט דעמאָלט מעגילע פאַרגאַנגענהייַט אַז עלעמענט.

צו נוצן דאָס פאַרמאָג ווערט, איר וואָלט שטעלן:

שטעלע: פאַרפעסטיקט;

האַלטן אין מיינונג, ווען איר פאַרריכטן אַן עלעמענט אין פּלאַץ אויף דיין פּלאַץ, עס וועט דרוקן אין אַז אָרט ווען דיין וועב בלאַט איז געדרוקט. פֿאַר בייַשפּיל, אויב דיין עלעמענט איז פאַרפעסטיקט אין דער שפּיץ פון דיין בלאַט, עס וועט זיין דערשראָקן אין די שפּיץ פון יעדער געדרוקט בלאַט - ווייַל עס איז פאַרפעסטיקט צו די שפּיץ פון די בלאַט. איר קענען נוצן מעדיע טייפּס צו ענדערן ווי די געדרוקט בלעטער ווייַזן פאַרפעסטיקט עלעמענטן:

@media screen {h1 # ערשטער {שטעלע: פאַרפעסטיקט; }} @media דרוק {h1 # ערשטער {שטעלע: סטאַטיק; }}

אָריגינעל אַרטיקל דורך דזשענניפער קרינן. Edited by Jeremy Girard on 1/7/16.