CSS Positioning эле көбүрөөк болот X, Y Координаттары
CSS ханан узак сайтында долбоорду түзүүнүн маанилүү бир бөлүгү болуп келген. Атүгүл Flexbox жана CSS тармагы сыяктуу башка CSS жайгашуусу техниканын өнүгүшү менен, ханан да адаштырыш үчүн кандай желе дизайнердик кабынан маанилүү орунду ээлейт.
CSS Positioning колдонуп жатканда, эмне керек биринчи нерсе бир элементи үчүн абсолюттук же салыштырмалуу жайгаштыруу колдонуп жаткан болсо, айтып турган кызмат ордуна CSS мүлктү түзүү болуп саналат. Ошондой эле так ушул эки ханан касиеттери айырмасын түшүнүү зарыл.
абсолюттук жана салыштырмалуу эки CSS абалы касиеттери көбүнчө интернет жасалгалоосунда колдонулган учурда, орду менчик төрт мамлекет негизи бар:
- статикалык
- абсолюттук
- салыштырмалуу
- туруктуу
Статикалык интернет-беттеги ар бир элементи үчүн демейки абалы болуп саналат. Эгер сиз элементтин ордун аныктоо жок болсо, анда аны статикалык болот. Бул ал жерде негизинде экранда көрсөтө турганын билдирет HTML документтин жана ал кандайча ичинде көрсөтө турган табигый агымынын ошол документ.
жогорку же статикалык абалын бар элементке калды сен ханан эрежелер колдонулат, анда, ошол эрежелер эске алынбайт жана элемент бул нормалдуу документ агымынын пайда жерде кала берет болот. Сен, чын эле, анда да, чанда гана болот, ал демейки маани-жылдан бери CSS бир статикалык абалда бир элементин көрсөтүшү керек.
Абсолюттук CSS Positioning
Шартсыз жайгаштыруу, балким, түшүнүү үчүн жөнөкөй CSS орду болуп саналат. Сиз бул CSS орду мүлк менен башталат:
орду: абсолюттук;Бул маани кандай документ кадимки агымы алынып, анын ордуна бетиндеги так жерге коюлушу керек жайгашуусун жатат браузерди айтылат. Бул элементтин жакын эмес staticly жайгашкан түпкү негизинде эсептелинет.
таптакыр жайгашкан элемент документтин кадимки агымы чыгып кабыл алынат, себеби, ал HTML ага чейин кандай элементтер же андан кийин интернет баракчасында жайгашкан таасир этпейт.
Мисал катары - Сиз салыштырмалуу баасы колдонуп жайгашкан бир талаш болсо, анда (бул наркы боюнча бир аздан кийин карап), ошол бөлүнүү ичинде сиз бөлүмүнүн чокусунан 50 пикселди жайгаштыруу үчүн каалаган бир пункт бар болчу, сени "жогорку" менчик 50px турган ордун наркы менен бирге ошол пунктуна "абсолюттук" бир абалы толуктай турган, ушул сыяктуу.
орду: абсолюттук; топ: 50px;Бул таптакыр жайгашкан элемент анда дайыма салыштырмалуу жайгашкан бөлүмүнүн чокусунан 50 пикселди көрсөтө турган - кандай гана кадимки агымы бар дагы эмне көрсөтүп турат. Сиздин "таптакыр" элементи анын контекст катары салыштырмалуу жайгашкан бири жана сиз колдонгон positing балл салыштырмалуу колдонулган жайгашкан.
пайдалануу үчүн колдо бар төрт ханан касиеттери бар:
- жогорку
- туура
- Жыйынтык
- сол
Сиз жогорку же төмөнкү да колдонушу мүмкүн (бир элемент бул баалуулуктарды эки боюнча жайгашкан мүмкүн эмес болгондуктан, демек) жана да оң же сол.
бир элемент абсолюттук кызмат ордуна коюлса, бирок ал жерде эч кандай эмес staticly жайгашкан ата-бабаларына, анда бул барактын жогорку деңгээл элементи болуп саналат орган элементи салыштырмалуу жайгашкан болот.
салыштырмалуу Positioning
Биз буга чейин салыштырмалуу жайгаштыруу айтылган, ошондуктан азыр бул мүлктү карап көрөлү.
Салыштырмалуу ханан эле төрт шартсыз жайгаштыруу сыяктуу жайгаштыруу касиеттерин, бирок, анын ордуна анын жакын эмес staticly жайгашкан ата-бабасы да элементтин абалын негизине колдонот, ал элемент бул кадимки агымы дагы эле болмок жерден башталат.
Мисалы, сиз интернет-беттеги үч пункттары бар, үчүнчү "орду: тууганы" бар болсо, ага жайгаштырылган стили, ал абалы, ал учурдагы турган жерине таянып ордун да болот.
.1-пункту <б> 2-пункту <б стили = "орду: салыштырмалуу, сол: 2em;">.. 3-пункту
Жогорудагы мисалда, үчүнчү абзац контейнер элементтин сол тараптан 2em жайгашкан, бирок дагы эле биринчи, эки-пункттарында төмөн болот. Бул документтин кадимки агымы кала турган, ал эми бир аз кириштелет. Эгер ордуна, аны өзгөртүп, анда: абсолюттук; ал мындан ары документтин кадимки агымы болот, анткени, анын үстүнөн көрсөтө турган төмөнкү нерсе.
Желе-беттеги Elements көп абалын баасын аныктайт колдонулат: ошол элементин билдирет белгиленген эч кандай ордун толтуруу наркы менен салыштырмалуу бул нормалдуу агып келе турган жерде так бойдон калууда. Бул башка элементтери таптакыр жайгашкан мүмкүн болгон каршы контекстте деп элементин түзүү үчүн гана жасалат. Мисалы, "контейнер" (дизайн абдан кадимки турган) бир классы наркы менен бүт сайтын тегерегиндеги талаш болсо, ошол бөлүнүү анын ичиндеги бир нерсе ушунчалык карата ордуна коюуга болот колдоно аласыз бир ханан контекст катары ал.
Эмне жөнүндө Fixed Positioning?
Негизги жайгаштыруу шартсыз жайгаштыруу сыяктуу бир топ болуп саналат. Элементтин орду абсолюттук модели катары ошол эле жол менен эсептелет, бирок, негизги элементтери анда бир эле аймакка белгиленет суу . беттеги Калганынын баары ошол элементтин өтүп жылдырып берет.
Бул мүлк баасын колдонуу үчүн, жолго чыгышчу:
орду: белгиленген;Эгер сайтта ордуна элементин чечүү качан эстен чыгарбайлы, ал Желе бет басылып чыгып жатканда ошол жерде басып чыгарууга болот. Мисалы, сиздин элементи беттин жогору белгиленген болсо, анда ар бир басылма беттин жогору жагында пайда болот - бул беттин башына негизги себеби. Сиз кантип өзгөртүү үчүн массалык түрлөрүн колдоно алат басма сөз беттериндеги негизги элементтерди чагылдыруу:
@media экран {h1 # биринчи {орду: белгиленген; }} @media басма {h1 # биринчи {орду: статикалык; }}Атайга Krynin тарабынан Original макалада. Jeremy Джирард тарабынан 1/7/16 күнү өзгөртүлдү.