CSS пазіцыянаванне больш, чым проста X, Y Каардынаты
пазіцыянаванне CSS ўжо даўно з'яўляецца важнай часткай стварэння макетаў вэб-сайтаў. Нават са з'яўленнем новых метадаў разметкі CSS, як Flexbox і CSS Grid, пазіцыянаванне дагэтуль займае важнае месца ў сумцы любога вэб-дызайнера трукаў.
Пры выкарыстанні пазіцыянавання CSS, то першае, што вам трэба зрабіць, гэта ўсталяваць ўласцівасць CSS для пазіцыі, каб паведаміць браўзэру, калі вы збіраецеся выкарыстоўваць абсалютная або адноснае пазіцыянаванне для дадзенага элемента. Акрамя таго, неабходна дакладна разумець розніцу паміж гэтымі двума ўласцівасцямі пазіцыянавання.
У той час як абсалютнае і адноснае з'яўляюцца два ўласцівасці CSS пазіцыі найбольш часта выкарыстоўваецца ў вэб-дызайне, ёсць на самой справе чатыры дзяржавы да пазіцыі уласнасці:
- статычны
- абсалютны
- адносны
- фіксаваны
Статычнае становішча па змаўчанні для любога элемента на вэб-старонцы. Калі вы не вызначыць пазіцыю элемента, ён будзе статычным. Гэта азначае , што яна будзе адлюстроўвацца на экране на аснове , дзе ён знаходзіцца ў HTML - дакумент і як ён будзе адлюстроўвацца ўнутры нармальнага патоку гэтага дакумента.
Калі ўжыць правілы пазіцыянавання, як зверху ці злева элемент, які мае статычнае становішча, гэтыя правілы будуць праігнараваныя, і элемент будзе заставацца там, дзе ён з'яўляецца ў нармальным патоку дакумента. На самай справе, вы б рэдка, калі калі-небудзь, неабходна ўсталяваць элемент у статычным становішчы ў CSS, паколькі гэта значэнне па змаўчанні.
Абсалютная пазіцыянаванне CSS
Абсалютная пазіцыянаванне, верагодна, самая простая пазіцыя CSS, каб зразумець. Вы пачынаеце з гэтай пазіцыі уласнасці CSS:
пазіцыя: абсалютная;Гэта значэнне паказвае браўзэру, што ўсе збіраецца пазіцыянавацца павінны быць выдаленыя з нармальнага патоку дакумента і замест таго, каб змясціць у дакладным месцы на старонцы. Гэта разлічваецца на аснове найбольшага ня-продка, размешчанага статычна гэтага элемента.
Паколькі абсалютна пазіцыянаваны элемент адбіраецца з нармальнага патоку дакумента, гэта не паўплывае, як элементы перад ім ці пасля яго ў HTML размешчаны на вэб-старонцы.
У якасці прыкладу - калі ў вас падраздзяленне, якое пазіцыянавалася з выкарыстаннем значэння ў адносінах (мы будзем глядзець на гэтым значэнні ў бліжэйшы час), а ўнутры гэтага падзелу вы мелі пункт, які вы хацелі змясціць на 50 пікселяў ад верхняй часткі дывізіі, вам б дадаць значэнне становішча «абсалютны» у гэты пункт нароўні са зрушэннем значэння 50px на «верхнюю» уласнасці, як гэта.
пазіцыя: абсалютная; топ: 50px;Гэта не абсалютна пазіцыянаваны элемент затым заўсёды адлюстроўвае 50 пікселяў ад верхняй часткі, што адноснае размяшчэнне падзелу - незалежна ад таго, што яшчэ паказвае там у нармальным патоку. Ваш «абсалютна» размешчаны элемент, які выкарыстоўваецца адносна размешчаныя адзін, як яго кантэкст і значэнне полагания вы карыстаецеся адносна, што гэта.
Ўласцівасці чатыры пазіцыянавання, якія ў вас ёсць даступныя для выкарыстання з'яўляюцца:
- топ
- права
- дно
- злева
Вы можаце выкарыстоўваць або зверху ці знізу (паколькі элемент не можа быць усталяваны ў адпаведнасці з абодвух з гэтых значэнняў) і направа або налева.
Калі элемент усталяваны ў становішча абсалютнага, але ён не мае не-продкаў статычны размешчаны, то яно будзе размешчана адносна элемента корпуса, які з'яўляецца самым высокім узроўнем элементам старонкі.
RP бацькоў
Мы ўжо згадвалі, адноснае пазіцыянаванне, так што давайце паглядзім на гэта маёмасць у цяперашні час.
RP бацькоў выкарыстоўвае адны і тыя ж чатыры ўласцівасці пазіцыянавання, як абсалютная пазіцыянаванне, але замест таго, грунтуючыся на пазіцыі элемента пры яго бліжэйшы ня-продка, размешчанага статычна, ён пачынае ад таго, дзе элемент будзе, калі ён усё яшчэ знаходзіліся ў нармальным струмені.
Напрыклад, калі ў вас ёсць тры пункты на вашай вэб-старонцы, а трэцяя мае «пазіцыя: адносная» стыль, ускладзеныя на яго, гэта становішча будзе кампенсавацца на аснове яго бягучага месцазнаходжання.
. <Р> Пункт 1 <р> Пункт 2 <р стыль = "становішча: адносная; злева: 2em;"> .. Пункт 3У прыведзеным вышэй прыкладзе, трэці пункт будзе размешчаны 2em з левага боку элемента кантэйнера, але па-ранейшаму будзе ніжэй першых два пунктаў. Ён будзе заставацца ў нармальным патоку дакумента, і проста быць трохі зрушаная. Калі вы змянілі яго ў становішча: абсалютны; небудзь пасля яго будзе адлюстроўвацца па-над ім, таму што ён больш не будзе знаходзіцца ў нармальным патоку дакумента.
Элементы на вэб-старонцы часта выкарыстоўваюцца, каб усталяваць значэнне пазіцыі: адносная без зрушэння значэнне, усталяванае, што азначае, што элемент застаецца менавіта там, дзе ён будзе адлюстроўвацца ў нармальным струмені. Гэта робіцца выключна для стварэння гэтага элемента ў якасці кантэксту, супраць якога іншыя элементы могуць быць размешчаны абсалютна. Напрыклад, калі ў вас ёсць падраздзяленне, навакольны ўвесь сайт з класам значэннем «кантэйнера» (які з'яўляецца вельмі распаўсюджаным сцэнарам ў вэб-дызайне), што падзел можа быць усталяваны ў становішча адносна так, што ўсё ўнутры яго можна выкарыстоўваць ён у якасці кантэксту пазіцыянавання.
Што Аб Фіксаванае пазіцыянаванне?
Фіксаванае пазіцыянаванне шмат як абсалютная пазіцыянаванне. Становішча элемента вылічаецца такім жа чынам , як і абсалютная мадэль, але фіксаваныя элементы затым фіксуюць у тым , што Адрес- амаль як вадзяны знак . Усё астатняе на старонцы будзе пракручваць міма гэтага элемента.
Для таго, каб выкарыстоўваць гэта значэнне ўласцівасці, вы павінны ўсталяваць:
Становішча: фіксаваны;Майце ў выглядзе, калі вы фіксуеце элемент на месцы на вашым сайце, ён будзе друкаваць у гэтым месцы, калі вэб-старонка раздрукоўваецца. Напрыклад, калі ваш элемент замацаваны ў верхняй частцы старонкі, ён будзе адлюстроўвацца ў верхняй частцы кожнай друкаванай старонкі - таму што яна мацуецца да верхняй частцы старонкі. Вы можаце выкарыстоўваць тыпы носьбітаў , каб змяніць , як друкаваныя старонкі адлюстроўваюцца нерухомыя элементы:
@media экран {h1 # першы {пазіцыя: фіксаваны; }} @media друку {h1 # першы {становішча: статычнае; }}Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 1/7/16.