Ópoê 14:
Ïoçèöèoíèpoâaíèe ýëeìeíòoâ

Oãëaâëeíèe (â íoâoì oêíe)
Bíèç

Ïpè ïoìoùè CSS- ïoçèöèoíèpoâaíèÿ âû ìoæeòe paçìecòèòü ýëeìeíò òo÷ío â íyæíoì ìecòe còpaíèöû. Bìecòe c ïoïëaâêaìè (cì. Ópoê 13 ) ïoçèöèoíèpoâaíèe äaeò âaì áoëüøèe âoçìoæíocòè äëÿ coçäaíèÿ òo÷íoão è íaâopo÷eííoão äèçaéía.

B ýòoì ypoêe ìû oácyäèì cëeäyþùee:

Ïpèíöèïû CSS- ïoçèöèoíèpoâaíèÿ

Ïpeäcòaâèì oêío ápayçepa êaê cècòeìy êoopäèíaò:
êapòèíêa
Ïpèíöèïû CSS- ïoçèöèoíèpoâaíèÿ - â òoì, ÷òo âû ìoæeòe pacïoëoæèòü áoêc â cècòeìe êoopäèíaò ãäe yãoäío.
Cêaæeì, ìû xoòèì ïoçèöèoíèpoâaòü çaãoëoâoê. Ïpè ècïoëüçoâaíèè áoêcoâoé ìoäeëè (cì. Ópoê 9 ) çaãoëoâoê âûãëÿäèò òaê:
êapòèíêa
Ecëè ìû xoòèì pacïoëoæèòü eão ía 100 px oò âepxíeé ãpaíèöû äoêyìeíòa è ía 200px cëeâa, ìû äoëæíû ââecòè cëeäyþùèé êoä CSS:

h1
{position:absolute; top: 100 px; left: 200px;}

Boò peçyëüòaò:
êapòèíêa
Kaê âèäèòe, Ïoçèöèoíèpoâaíèe c ïoìoùüþ CSS - o÷eíü òo÷íaÿ òexíèêa ïpè paçìeùeíèè ýëeìeíòoâ. Ýòo íaìíoão ïpoùe, ÷eì ècïoëüçoâaòü òaáëèöû, ïpoçpa÷íûe èçoápaæeíèÿ èëè eùe ÷òo-íèáyäü ïoäoáíoe.

Aácoëþòíoe ïoçèöèoíèpoâaíèe

Ýëeìeíò, ïoçèöèoíèpoâaííûé aácoëþòío, íe ïoëy÷aeò íèêaêoão ïpocòpaícòâa â äoêyìeíòe. Ýòo oçía÷aeò, ÷òo ïocëe ïoçèöèoíèpoâaíèÿ oí íe ocòaâëÿeò ïocëe ceáÿ ïycòoe ïpocòpaícòâo.
Äëÿ aácoëþòíoão ïoçèöèoíèpoâaíèÿ ýëeìeíòa câoécòâo position äoëæío èìeòü çía÷eíèe absolute . Bû ìoæeòe ècïoëüçoâaòü çía÷eíèÿ left, right, top è bottom äëÿ paçìeùeíèÿ áoêca.
B êa÷ecòâe ïpèìepa aácoëþòíoão ïoçèöèoíèpoâaíèÿ ìû paçìecòèì 4 áoêca â yãëax äoêyìeíòa:

#box1
{position:absolute; top: 50 px; left: 50px;}

#box2
{position:absolute; top: 50 px; right: 50px;}

#box3
{position:absolute; bottom: 50 px; right: 50px;}

#box4
{position:absolute; bottom: 50 px; left: 50px;}

Oòíocèòeëüíoe ïoçèöèoíèpoâaíèe

×òoáû ïoçèöèoíèpoâaòü ýëeìeíò oòíocèòeëüío, ycòaíoâèòe â câoécòâe position çía÷eíèe relative . Paçíèöa ìeæäy oòíocèòeëüíûì è aácoëþòíûì ïoçèöèoíèpoâaíèeì cocòoèò â òoì, êaê oác÷èòûâaeòcÿ ïoçèöèoíèpoâaíèe.
Ïoçèöèÿ ýëeìeíòa, paçìeùaeìoão oòíocèòeëüío, oác÷èòûâaeòcÿ oòíocèòeëüío eão opèãèíaëüíoé ïoçèöèè â äoêyìeíòe . Ýòo oçía÷aeò, ÷òo âû cìeùaeòe ýëeìeíò âïpaâo, âëeâo, ââepx èëè âíèç. Taêèì oápaçoì, ýëeìeíò âce eùe çaíèìaeò â äoêyìeíòe ïpocòpaícòâo ïocëe ïoçèöèoíèpoâaíèÿ.

Kaê ïpèìep oòíocèòeëüíoão ïoçèöèoíèpoâaíèÿ ïoïpoáyeì paçìecòèòü òpè pècyíêa oòíocèòeëüío èx opèãèíaëüíoão pacïoëoæeíèÿ ía còpaíèöe. Oápaòèòe âíèìaíèe, ÷òo pècyíêè ocòaâèëè ïocëe cìeùeíèÿ ïycòoe ïpocòpaícòâo ía câoèx opèãèíaëüíûx ïoçèöèÿx â äoêyìeíòe:

#dog1
{position:relative; left: 350 px; bottom: 150 px;}

#dog2
{position:relative; left: 150 px; bottom: 500px;}

#dog3
{position:relative; left: 50 px; bottom: 700px;}

Peçþìe

B ïocëeäíèx äâyx ypoêax âû íay÷èëècü coçäaâaòü ïoïëaâêè è ïoçèöèoíèpoâaòü ýëeìeíòû. Ýòè äâa ìeòoäa äaþò âaì oïpeäeëeííûe ïpeèìyùecòâa ïpè êoícòpyèpoâaíèè còpaíèö áeç íeoáxoäèìocòè ècïoëüçoâaòü còapûe ìeòoäû âpoäe òaáëèö è ïpoçpa÷íûx èçoápaæeíèé â HTML. Bìecòo íèx ècïoëüçyéòe CSS. Ýòo òo÷íee, èìeeò oïpeäeëeííûe ïpeèìyùecòâa è íaìíoão ïpoùe â paáoòe.

Cëeäyþùèé ypoê: Hacëoeíèe c ïoìoùüþ z-index (Cëoè)

Haçaä

Bâepx