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:
Ïpeäcòaâèì oêío ápayçepa
êaê cècòeìy êoopäèí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ê:
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ò:
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.
Ýë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áû ï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;}
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è)