קסס שטעלע: יגזאַמפּאַלז

. אויסלייג-ביגינערז אָפֿט האָבן שוועריקייט מיט פּאַזישאַנינג יסודות דורך קסס. Position куда проще в освоении, чем кажется на первый взгляд. אין פאַקט, קסס שטעלע פאַרמאָג איז פיל גרינגער צו לערנען ווי עס מיינט בייַ ערשטער בליק. דורך מאַסטערינג זיי, איר באַקומען אַ שטאַרק געצייַג מיט וואָס איר קענען צולייגן אַלע חשבון יסודות אין די רעכט ערטער. добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются אבער אין סדר צו באַקומען רעזולטאַטן, איר דאַרפֿן צו וויסן וועגן אַלע די יגזיסטינג וואַלועס, ווייַל די פּרינציפּן פון זייער אַקשאַנז זענען זייער אַנדערש

ספּעסיפיקס פון דעם דאָקומענט לויפן

работает с потоком веб-страницы. שטעלע קסס אַרבעט מיט די וועב בלאַט שטראָם. ווי צו פֿאַרשטיין דעם? html- разметке. דורך ניט ויסצאָלן, אַלע חשבון עלעמענטן זענען עריינדזשד אין דער סדר אין וואָס איר Created זיי אין הטמל- מאַרקאַפּ. header расположен над тегом footer, то и на странице он будет отображаться выше. אויב די כעדער קוויטל ליגן אויף די קוויטל Footer, און דעמאָלט עס וועט זיין געוויזן אויבן דעם בלאַט. footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». קאָנווערסעלי, אויב פֿאַר עטלעכע סיבה איר באַשליסן צו שטעלן אַ Footer אין HTML אויף די "העדער", "קעלער" בלאַט וועט זיין געוויזן אויבן דער "היטל". אין דעם פאַל, בלאָק-מדרגה עלעמענטן פאַרנעמען די גאנצע ברייט בנימצא צו זיי. לאָווערקאַסע, אין דרייען, זענען עריינדזשד אין איין רודערן, בשעת ניט נעמען עס אַלע, און דעמאָלט וועט זיין טראַנספעררעד צו די נייַ איינער. דעם פּראָצעדור איז האָט גערופֿן דעם "לויפן פון דעם דאָקומענט."

צו טוישן די שטראָם נאַטור געניצט שטעלע פאַרמאָג . אין קסס. float, но его мы рассматривать не будем. עס קענען אויך בייַטן רעכט צו די פּראָפּערטיעס פון לאָזנ שווימען, אָבער עס וועט ניט זיין געהאלטן. מיט די פּאַזישאַנינג מיטגליד קענען זיין געמאכט צו "פאַלן" פון דער פּראָסט טייַך, נאָך וואָס עס וועט אָנהייבן צו ביכייוו אנדערש. ווי פּונקט - עס דעפּענדס אויף די געניצט ווערט פון די פאַרמאָג.

קסס שטעלע: סטאַטיק

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. שטעלע: סטאַטיק, אָדער סטאַטיק פּאַזישאַנינג איז די ניט ויסצאָלן פֿאַר אַלע HTML בלאַקס אַז איר האָבן Created. אונטער נאָרמאַל צושטאנדן, איר טאָן ניט האָבן צו האַנדלען מיט אים. static. אויב קיין בלאָק אָדער שורה איז ניט Defined אין אַלע קיין שטעלע, אַזוי עס איז וויכטיק סטאַטיק. אויף דעם בלאַט אַז קאָמפּאָנענט איז געוויזן אין לויט מיט די שטראָם. right/left или top/bottom, никакого эффекта не будет. אויב איר ווייַזן אים די פאַרמאָג רעכט / לינקס אָדער שפּיץ / דנאָ, קיין ווירקונג וועט זיין.

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

оказывается вне нормального потока документа. ווען ניצן דעם פאַרמאָג, די עלעמענט איז אַרויס דער נאָרמאַל לויפן פון דעם דאָקומענט. относительно окна браузера, независимо от того, как размещаются прочие компоненты. איצט זייַן שטעלע איז קאַלקיאַלייטיד קאָרעוו צו דעם בלעטערער פֿענצטער, ראַגאַרדלאַס פון ווי אנדערע קאַמפּאָונאַנץ זענען ליגן. : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. אין אנדערע ווערטער, אַ בלאָק מיט שטעלע: פאַרפעסטיקט לאָזן די שפּיץ פון די בלאַט, געדריקט קעגן די ברעג פון דעם בלעטערער פֿענצטער, און די אנדערע עלעמענטן נעמען זייַן אָרט לויט צו די שטראָם.

דער הויפּט שטריך פון פאַרפעסטיקט פּאַזישאַנד יסודות איז אַז זיי קענען אָוווערלאַפּ די אנדערע בלאַקס און בלאַט שטריקל. : fixed будет будто бы оставаться на месте, не исчезая с экрана. ווען סקראָללינג בלאָק מיט שטעלע: פאַרפעסטיקט וועט סאַפּאָוזאַדלי בלייַבן אין פּלאַץ אָן דיסאַפּירינג פון דעם עקראַן. דעם איז נוצלעך אויב איר דאַרפֿן צו נאַוויגירן אָדער די ווי, צו וואָס דער באַניצער מוזן שטענדיק האָבן צוטריט צו. פאַרפעסטיקט פּאַזישאַנינג איז אויך געניצט אויב איר ווילן צו שטעלן אַ שנעל מעגילע קנעפּל אין אַ זיכער טייל פון די בלאַט.

קסס שטעלע: קאָרעוו

. ניצן דעם פאַרמאָג איז גערופֿן קאָרעוו פּאַזישאַנינג. : relative, тот останется на своем месте. אויב איר שטעלן די נומער פאַרמאָג שטעלע: קאָרעוו, ער וועט בלייַבן אין זייַן אָרט. right/left и top/bottom. אין ערשטער בליק, גאָרנישט פיל כאַפּאַנז, אָבער אַלע טוישן אויב ווייַטער נוצן פּראָפּערטיעס רעכט / לינקס און שפּיץ / דנאָ. זיי קענען זיין געניצט צו קאָנטראָלירן באַוועגונג פון דער קאָמפּאָנענט קאָרעוו צו זייַן אָרט. останутся на своих положениях, не обращая внимания на освободившееся место . אין דער אָרט ווו די בלאָק אָדער שורה זענען געניצט, וואָלט זיין אַ ליידיק אָרט - די אנדערע עלעמענטן בלייַבן אין זייער שטעלעס, ניט פּייינג ופמערקזאַמקייַט צו די פרייַ אָרט.

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

אַבסאָלוט פּאַזישאַנינג

איינער פון די מערסט טשיקאַווע און די רובֿ אָפט געניצט אָפּציעס. ווען ניצן פּראָפּערטיעס שטעלע absolute положение компонента страницы будет высчитываться относительно окна браузера. מיט די ווערט פון אַבסאָלוט שטעלע פון די בלאַט קאָמפּאָנענט וועט זיין קאַלקיאַלייטאַד קאָרעוו צו די בלעטערער פֿענצטער. элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. אנדערע עלעמענטן (ניט-לעגאַמרע פּאַזישאַנד) ווי "פאַרגעסן" וועגן דעם "ברודער" צו דער עקזיסטענץ פון שטעלע: אַבסאָלוט און וועט נעמען זייַן אָרט אין דער טייַך. : fixed, но есть и серьезные различия. עס וואָלט ויסקומען אַז אַלץ איז פּונקט די זעלבע ווי אין די פאַל פון שטעלע: פאַרפעסטיקט, אָבער עס זענען וויכטיק חילוק.

top/right/bottom/left. ערשטער, די שטעלע פון די עלעמענט קענען זיין קאַנטראָולד פרעעלי - זענען געניצט פֿאַר דעם פאַרמאָג שפּיץ / רעכט / דנאָ / לינקס. bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. למשל, אויב איר שטעלן די ווערט פון די דנאָ: 100פּקס, בלאָק "שטופּן אַוועק" פון די דנאָ פון די בלאַט 100 בילדצעלן. צווייטנס, ווען סקראָללינג די "אַבסאָלוט" קאָמפּאָנענט וועט בלייַבן אין פּלאַץ, אַנשטאָט פון בעת צו נאַוויגירן צו אַ בלאַט.

ינטעראַקשאַן אַבסאָלוט וניץ מיט פאָטער עלעמענטן

איר קענען דערגרייכן אַפֿילו מער גענוי קאָנטראָל איבער לעגאַמרע פּאַזישאַנד קאָמפּאָנענט. : fixed, relative или absolute. צו טאָן דאָס, איר דאַרפֿן צו שטעלן זייַן פאָטער פאַרמאָג שטעלע: פאַרפעסטיקט, קאָרעוו אָדער אַבסאָלוט.

באַטראַכטן אַ משל. div с классом relative-div, внутри которого размещается div с классом absolute-div. צי איר האָבן אַ דיוו מיט אַ סאָרט פון קאָרעוו-דיוו, ין וואָס איז געשטעלט אַ דיוו מיט די סאָרט פון אַבסאָלוט-דיוו. : absolute. מיר שטעלן די דרינענדיק אַפּאַראַט פאַרמאָג שטעלע: אַבסאָלוט. ער מיד "נעמט אַוועק" פון די טייַך און איז ערגעץ אין די שפּיץ, ווייַל איצט זייַן אָרט איז קאַלקיאַלייטיד קאָרעוו צו די בלעטערער פֿענצטער. relative-div свойство Position : relative и «блудный сын» возвращается на место. איצט געגעבן בלאָק מיט די סאָרט קאָרעוו-div שטעלע פאַרמאָג: קאָרעוו און די "ויסברענגעריש זון" איז צוריק אין פּלאַץ. כּמעט. אין פאַקט, עס אויס אין דער אויבערשטער לינקס ווינקל פון די פאָטער עלעמענט.

וואָס איז דעם געשעעניש? : absolute. האַנדלען אין די ספּעסיפיסיטי פּראָפּערטיעס שטעלע: אַבסאָלוט. static, позиция начинает зависеть от родительского элемента. דורך ניט ויסצאָלן, זייַן אָרט דעפּענדס אויף אייער בלעטערער, אָבער אויב די "פאָטער" איז אויך פּאַזישאַנד ווי עפּעס אָבער סטאַטיק, די פּאָזיציע הייבט צו אָפענגען אויף די פאָטער עלעמענט. דעם איז גרויס ווייַל איר קענען שטעלן די קאָמפּאָנענט ערגעץ אָן פּראָסטשיטיווייַאַ ריזיק נומערן קאָרעוו צו די בלעטערער פֿענצטער. אַרייַנטרעטן איז אָפֿט געניצט צו שטעלן ייקאַנז, קנעפּלעך און אנדערע קליין זאכן.

שטעלע קסס סענטערד

איינער פון די הויפּט שוועריקייטן ביגינערז איז צו צענטער די עלעמענט ווערטיקלי און כאָריזאַנטאַלי. , сделать это проще простого. רעכט ניצן די שטעלע פאַרמאָג, מאַכן עס גרינג. קסס שטעלע: אַבסאָלוט אין דער צענטער איז באַשטימט ווי גייט. iv с классом absolute-div, который находится в «диве» с классом relative-div. זאל ס זאָגן איר האָבן אַ קלאַס ד יוו אַבסאָלוט-דיוו, וואָס איז אין די "דיוואַ" צו די סאָרט קאָרעוו-דיוו. "פּאַרענט" און פּאַזישאַנד קאָרעוו צו זייַן ברייט גלייַך צו די ברייט פון די גאנצע בלאַט. и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. "דעססענדאַנט" האט אַ ברייט און אַ הייך פון 400 פּקס, אַבסאָלוט פּאַזישאַנינג, און איז ליגן דורך ניט ויסצאָלן אין דעם אויבערשטן-לינקס ווינקל פון די פאָטער עלעמענט.

top: 50 % и left: 50 %. כל איר דאַרפֿן צו טאָן - איז צו שטעלן די אַבסאָלוט קאָמפּאָנענט שפּיץ: 50% און לינקס: 50%. כּמעט געטאן! сдвинулся с места и оказался почти в центре, но не совсем. אַבסאָלוט-div באַוועגנ זיך און איז געווען כּמעט אין דער צענטער, אָבער נישט גאַנץ. מיטל "פאָטער" פאַרבינדן צו זיין סוף, און מיר דאַרפֿן צו באַקומען אין דעם צענטער פון די בלאָק פּרוווד צו זיין דער צענטער פון "זוימען." margin-left и margin-right со значениями -200 px. צו טאָן דאָס, איר דאַרפֿן צו פרעגן אים אַ גרענעץ-לינקס און גרענעץ-רעכט מיט די וואַלועס -200 פּקס. אזוי, מיר יבעררוק די לעגאַמרע פּאַזישאַנד בלאָק אויף העלפט פון זייַן הייך און ברייט. אַלע עס אין די מיטן!

אָוווערלאַפּינג קאַמפּאָונאַנץ

די פּראָבלעם קענען זיין שווער, אין ערשטער בליק, "די ימפּאַזישאַן פון" פּאַזישאַנד יסודות צו זייער "שכנים". : fixed будет перекрывать все, что расположено на странице. למשל, דער קאָמפּאָנענט שטעלע: פאַרפעסטיקט וועט אָווועררייד אַלע ליגן אויף די בלאַט. z-index, однако помните, что оно работает только для позиционированных элементов. סגולע די סיטואַציע, איר קענען נוצן פּראָפּערטיעס פון די ז-אינדעקס, אָבער געדענקען, אז עס נאָר אַרבעט פֿאַר פּאַזישאַנד עלעמענטן. אַקקאָרדינגלי, אויב איר ווילן צו שטעלן אַ בלאָק אויף שפּיץ פון די פאַרפעסטיקט פּאַזישאַנד עלעמענט, דעם אַפּאַראַט וועט אויך האָבן צו שטעלן די פּאַזישאַנינג. למשל, אַ קאָרעוו.

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. א דער בעסטער וועג צו בעל די פּאַזישאַנינג - געהאלטן יגזאַמפּאַלז שטעלע קסס, צו עקספּערימענט און פּרובירן עפּעס אַנדערש. calc() – это даст возможность более гибко настраивать расположение. פּרובירן צו לערנען צו נוצן עס אין קאַנדזשאַנגקשאַן מיט די פֿונקציע קאַלק () - דעם וועט געבן גרעסער בייגיקייַט צו סטרויערן די שטעלע. אָבער, געדענקען אַז דאָס פאַרמאָג איז ניט בדעה פֿאַר בנין די גאנצע "נעץ" בלעטער. מיט עס, איר דאַרפֿן צו רירן לעפיערעך קליין עלעמענטן, אָדער קענען זיין אויך גרינג צו באַקומען צעמישט.