Мутмаъинӣ ва равзанаи ягона - Тавсифи CSS Ҷойгиркунӣ

CSS Ҷойгиршавӣ аз Танҳо X, Y Ҳамоҳангсозӣ аст

Ҷойгиркунии CSS дарозтарин қисми таркиби сайтҳо мебошад. Ҳатто бо болоравии усулҳои нави CSS, ба монанди Flexbox ва CSS Grid, мавқеи ҷойгиршавӣ дар ҳама гуна варақаи дизайнерҳои вебсайт ҷойгир аст.

Ҳангоми истифодаи CSS, аввалин чизе, ки ба шумо лозим аст лозим аст, муайян кардани амволи CSS барои мавқеъи браузер, агар шумо барои истифодаи унсури додашудаи мутлақи мутлақ ва ё нисбӣ истифода баред. Шумо инчунин бояд фарқияти байни ин ду мавқеъро муайян кунед.

Ҳарчанд мутлақ ва нисбӣ дорои хосиятҳои мавқеи CSS аст, ки аксар вақт дар тарҳрезии веб истифода мешаванд, воқеан чор давлат ба моликияти мавқеъ вуҷуд доранд:

• статистикӣ
• мутлақ
• нисбӣ
• истодаанд

Истаравшанӣ мавқеи пешфарз барои ҳама гуна элемент дар саҳифаи веб аст. Агар шумо мавқеи элементро муайян накунед, ин статистикӣ хоҳад буд. Ин маънои онро дорад, ки он дар экран дар асоси он дар куҷо дар ҳуҷҷати HTML нишон дода мешавад ва чӣ тавр дар дохили ҷараёни оддии ин ҳуҷҷат нишон дода мешавад.

Агар шумо қоидаҳои ҷойгиркунии монанди боло ё чап ба унсури дорои мавқеи статсиониро истифода баред, он қоидаҳо нодуруст дода мешаванд ва элементи он дар ҷараёни ҷараёни оддии ҳуҷҷат боқӣ мемонад. Дар ҳақиқат, шумо каме вақт ба шумо лозим меояд, ки унсурҳои статсионариро дар CSS муқаррар созед, зеро он арзиши аслӣ мебошад.

Мавқеи доимии CSS

Мавқеи муваққатӣ шояд ба таври осонтарини мавқеи CSS бошад. Шумо бо ин амволи мавсим CSS шурӯъ мекунед:

мавқеъ: мутлақ;

Ин арзишро браузер медиҳад, ки ҳар як ҷойгиршавиаш бояд аз ҷараёни оддии ҳуҷҷат хориҷ карда шавад ва дар ҷойи дақиқ дар саҳифа ҷойгир шавад. Ин дар асоси он унсуре, ки наздиктарин номаълуми номаълум аст, ҳисоб карда мешавад.

Азбаски элементи комилан баръакси аз ҷараёни оддии ҳуҷҷат гирифта мешавад, он ба унсурҳои пеш аз он ё баъд аз он дар HTML дар саҳифаи веб ҷойгир карда намешавад.

Мисол, агар шумо тақсим карда шуда бошед, ки бо истифода аз арзиши нисбӣ (мо ба ин арзиш зудтар назар хоҳем кард), ва дар он тақсимот шумо порчаи тела доштед, ки мехоҳед 50 пикселро аз болои тақсимот ҷойгир кунед арзиши мавқеи "мутлақ" ба паролро дар якҷоягӣ бо арзиши пулии 50px дар амволи "боло", ба монанди ин.

мавқеъ: мутлақ; top: 50px;

Ин элемент комилан мавқеъро мебозад, он гоҳ ҳар вақт 50 пикселро аз болои он тақсимоти нисбатан тақсимшавандаро нишон медиҳад - новобаста аз он, ки дар ҷараёни ҷараёни оддӣ мавҷуд аст. Элементҳои "комилан" -и шумо "мӯцлати мутараинкк" -ро истифода мебаранд ва он чизеро, ки шумо истифода мебаред, ба он вобаста аст.

Ду сифатҳои мавқеие, ки шумо барои истифода дастрас мекунед, инҳоянд:

• top
• рост
• поёни
• left

Шумо метавонед болотар ё поёнро истифода баред (азбаски элемент мувофиқи ҳардуи ин арзишҳо ҷой дода наметавонад) ва ё рост ё чап.

Агар элемент ба мавқеи мутлақ муқаррар карда шавад, аммо он вуҷуд надорад, ки аҷдодони номаълуми ғайриқонунӣ вуҷуд дошта бошанд, он гоҳ ба унсурҳои бадан, ки унсури сатҳи олии саҳифа мебошад, ҷойгир карда мешавад.

Мавқеи ҷойгиршавӣ

Мо аллакай мавқеи нисбӣ доштем, бинобар ин, ба он амволи молекуло назар кунед.

Мавқеи ҷудогона ҳамон чор намуди мавқеъро ҳамчун мавқеи мутлақ истифода мебарад, вале ба ҷои он ки мавқеи элементро дар болои он наздиктарин набошад, он аз куҷо пайдо мешавад, агар он ҳанӯз дар ҷараёни мунтазам бошад.

Масалан, агар шумо дар саҳифаи вебии худ се параграф дошта бошед, ва сеюм дорои "мавқеъ: нисбӣ" аст, дар он ҷой ҷойгир карда мешавад.

Дар намунаи дар боло зикршуда, 2-уми банди сеюм аз тарафи чапи қисмҳои контейнер ҷой дода мешавад, вале дар поён аз ду банди аввал оварда мешавад. Он дар ҷараёни мунтазами ҳуҷҷат мемонад ва танҳо каме кам мешавад. Агар шумо онро ба мавқеъ тағйир додед: мутлақ; ҳама чизро пас аз он нишон медиҳад, ки он дар болои он нишон дода мешавад, зеро он дар ҷараёни мунтазами ҳуҷҷат намебошад.

Элементҳо дар веб саҳифа одатан барои муайян кардани арзиши мавқеи истифодашуда истифода мешаванд: вобаста ба он, ки арзиши муқаррарии муқаррарӣ муқаррар карда нашудааст, ки маънояш ин аст, ки элементи он дар ҷойи муқаррарӣ пайдо мешавад. Ин танҳо он аст, ки ин элементро ҳамчун контексте, ки ба он дигар элементҳо комилан мутобиқ карда мешаванд, муайян созанд. Масалан, агар шумо тақсимоти тамоми вебсайтро бо арзиши синфии "контейнер" (ки варианти хеле маъмул дар тарҳрезии веб) дошта бошед, тақсим карда мешавад, ки тақсимот ба мавқеи нисбӣ муқаррар карда шавад, то ки чизе дар дохили он истифода барад он ҳамчун мазмуни мавқеъ.

Дар бораи ҷойгиршавии мавқеи ҷойгиршуда чӣ?

Мавқеи ҷойгиркунӣ хеле фарқияти мавқеъ мебошад. Мавқеи элемент ба монанди ҳамон модели мутлақ ҳисоб карда мешавад, аммо элементҳои он пас аз он ҷойгиранд - қариб ба монанди як ваттоб . Ҳама чизҳо дар саҳифа пас аз ин элемент мегузаранд.

Барои истифодаи ин арзиши амвол, шумо бояд муқаррар кардед:

мавқеи: fixed;

Дар хотир доред, вақте ки шумо дар вебсайти шумо ҷойгир ҳастед, он вақте, ки веб сайташ чоп карда мешавад, дар он ҷой ҷойгир карда мешавад. Масалан, агар элементи шумо дар болои саҳифаи шумо ҷойгир бошад, он дар болои ҳар саҳифа чоп мешавад - зеро он ба болоии саҳифа нигаронида шудааст. Шумо метавонед тарзи чопкунии мақолаҳои чопиро тағйир диҳед, ки чӣ тавр саҳифаҳои чопшуда унсурҳои зеринро нишон медиҳанд:

@media screen {h1 # first position {position: fixed; }} @media print {h1 # first {position: static; }}}

Мақолаи аслӣ аз тарафи Ҷенифер Кренин. Эзоҳ: Ирони Girard дар 1/7/16 таҳрир карда шудааст.