CSS орналасуы тек X, Y координаттары емес
CSS орналасуы веб-сайттың макеттерін жасаудың маңызды бөлігі болып келді. Тіпті Flexbox және CSS Grid сияқты жаңа CSS орналасу техникасының пайда болуымен қатар, позициялау кез келген веб-дизайнердің сөмкесінде маңызды орынға ие.
CSS орналасуын пайдаланғанда, біріншіден, сізге қажет нәрсе үшін абсолютті немесе салыстырмалы орналасуды пайдаланатын болсаңыз, браузерге айқындауға арналған CSS сипатын орнатыңыз. Бұл екі позициялау қасиеті арасындағы айырмашылықты да түсінуіңіз керек.
Абсолюттік және салыстырмалы екеуі веб-дизайнда жиі қолданылатын CSS позициясының қасиеттері екені кезде, позицияның сипатына нақты төрт күй бар:
- статикалық
- абсолютті
- салыстырмалы
- тұрақты
Статикалық - веб-бетте кез-келген элементтің әдепкі күйі. Егер элементтің орнын анықтамасаңыз, ол статикалық болады. Бұл дегеніміз, ол HTML құжатында қай жерде және ол осы құжаттың қалыпты ағынын қалай көрсететініне қарай экранда көрсетіледі.
Статикалық позициясы бар элементке үстіңгі немесе сол жақ сияқты орналасу ережелерін қолдансаңыз, сол ережелер еленбейді және элемент қалыпты құжат ағынында пайда болатын жерде қалады. Шын мәнінде, әдетте, CSS-де статистикалық жағдайға элементті орнату қажет болғандықтан сирек болады, себебі бұл әдепкі мән.
Абсолюттік CSS орналасуы
Абсолютті позициялау, түсіну үшін, CSS-ның ең оңай күйі болып табылады. Бұл CSS позициясының сипатынан бастайсыз:
лауазымы: абсолютті;Бұл мән браузерге кез келген нәрсе құжаттың әдеттегі ағынынан алынып тасталуы керек және оның орнына нақты орынға орналастырылғанын білдіреді. Бұл элементтің ең жақын статистикалық орналастырылған атасы негізінде есептеледі.
Өйткені, құжаттың қалыпты ағымынан мүлдем орналастырылған элемент алынып тасталса, ол HTML элементтерінен бұрын немесе одан кейінгі элементтер веб-бетте орналастырылғанына әсер етпейді.
Мысал ретінде - сіз салыстырмалы құндылықты пайдалана отырып бөлінген бөлікке ие болсаңыз (бұл мәнді жақын арада қарастырамыз) және сол бөлімшеде сіз бөлімнің жоғарғы жағынан 50 пикселді орналастыруды қалайтын параграфыңыз болған осы параграфқа «абсолютті» ұстанымның мәнін қосып, «top» сипатындағы 50 пиксельдің ығысу мәні сияқты.
лауазымы: абсолютті; жоғарғы жағы: 50px;Бұл мүлдем орналастырылған элемент, әрдайым, қалыпты ағымда басқа жерде көрсетілсе де, әрдайым осы орналасқан бөліктің жоғарғы жағынан 50 пикселді көрсетеді. Сіздің «мүлдем» орналастырылған элемент салыстырмалы түрде орналастырылған контексті контекст ретінде пайдаланған және сіз пайдаланатын позицияның мәні салыстырмалы болып табылады.
Пайдалануға болатын төрт позициялау қасиеті:
- жоғарғы жағы
- құқық
- түбі
- сол
Жоғарғы немесе төменгі жағын қолдануға болады (элементті осы екі мәнге сәйкес орналастыруға болмайды) және солға немесе солға.
Егер элемент абсолютті орналасу орнына қойылса, бірақ онда статистикалық түрде орналастырылмаған ата-бабалар болмаса, онда ол элемент элементіне қатысты орналасады, яғни беттің жоғарғы деңгейлі элементі болып табылады.
Салыстырмалы орналасу
Біз салыстырмалы орналасу туралы айтқан болатынбыз, сондықтан қазір осы мүлікті қарастырайық.
Салыстырмалы позициялау абсолютті орналасу сияқты төрт позициялау қасиетін қолданады, бірақ элементтің ең жақын статистикалық орналаспаған ата-анасына орналасу орнына орнына бұл элемент қалыпты ағында болса, онда элемент болатын жерден басталады.
Мысалы, сіздің веб-параграфыңызда үш параграфыңыз бар болса, ал үшіншіде «орналасқан жері: салыстырмалы» мәнері бар болса, ол орынның ағымдағы орнына байланысты ауыстырылады.
1-тармақ.
2-тармақ.
3-тармақ.
Жоғарыда келтірілген мысалда үшінші абзац контейнер элементінің сол жақ жағынан орналасады, бірақ бірінші екі параграфтан төмен болады. Ол құжаттың қалыпты ағымында қалады және жай ғана аздап өтеледі. Егер сіз оны орнына өзгерткен болсаңыз: абсолютті; одан кейінгі кез келген нәрсе оның үстіне көрінеді, себебі ол құжаттың қалыпты ағымында болмайды.
Веб-беттегі элементтер элементтің мәнін орнату үшін жиі пайдаланылады: салыстырмалы мәннен емес, элемент қалыпты ағымда пайда болатын дәл қалады дегенді білдіреді. Бұл элемент басқа элементтерді мүлдем орналастыруға болатын контекст ретінде орнату үшін ғана жасалады. Мысалы, сіздің веб-сайтыңызды «контейнер» (веб-дизайндағы өте қарапайым сценарий) сыныптық мәнімен бөлісетін болсаңыз, онда бұл бөлімді салыстырмалы орынға орнатуға болады, сонда оның ішінде кез-келген нәрсе ол позициялау контексті ретінде.
Тұрақты орналасу туралы не айтасыз?
Тұрақты орналасу абсолютті орналасу сияқты көп. Элементтің позициясы абсолютті үлгі ретінде есептеледі, бірақ тіркелген элементтер сол жерде орналасады - шамамен су белгісі . Беттегі барлық қалғандар сол элементтен кейін айналдырады.
Бұл сипат мәнін пайдалану үшін сіз орнатқан:
позиция: тіркелген;Сіздің торабыңыздағы элементті түзеткенде, Веб-бетіңіз басып шығарылған кезде сол жерде басып шығарады. Мысалы, сіздің элементіңіз беттің жоғарғы жағында бекітілген болса, ол баспа бетінің жоғарғы жағында пайда болады - себебі ол беттің жоғарғы жағына бекітілген. Басып шығарылған беттердің бекітілген элементтерді қалай көрсетуін өзгерту үшін баспа құралдарының түрлерін пайдалануға болады:
@media экраны {h1 # бірінші (position: fixed; }} @media print {h1 # бірінші {position: static; }}Дженнифер Крининнің түпнұсқа мақаласы. Jerimy Girard 1/7/16 жылы редакцияланған.