Oãëaâëeíèe (â íoâoì oêíe)
Bíèç
CSS oïepèpyeò â òpex èçìepeíèÿx - âûcoòa, øèpèía è ãëyáèía. Mû paáoòaëè â äâyx èçìepeíèÿx ía ïpoòÿæeíèè âcex ïpeäøecòâyþùèx ypoêoâ. B ýòoì ypoêe ìû íay÷èìcÿ coçäaâaòü cëoè/layers. Kopoòêo ãoâopÿ - yïopÿäo÷èâaòü ýëeìeíòû òaê, ÷òoáû oíè ïepeêpûâaëècü.
Äëÿ ýòoão âû ìoæeòe
ïpècâoèò êaæäoìy ýëeìeíòy
íoìep (z-index). Ýëeìeíò c
áoëüøèì íoìepoì ïepeêpûâaeò
ýëeìeíò c ìeíüøèì íoìepoì.
Cêaæeì, ìû èãpaeì â ïoêep è y íac - royal flush. Haøa "pyêa" äoëæía áûòü ïpeäcòaâëeía òaê, ÷òoáû êaæäaÿ êapòa èìeëa z-index:
Ïpè ýòoì íoìepa èäyò ïoäpÿä (1-5 ), ío òoão æe peçyëüòaòa ìoæío äoáèòücÿ è ïpè ècïoëüçoâaíèè 5 paçëè÷íûx
íoìepoâ. Baæía xpoíoëoãè÷ecêaÿ
ïocëeäoâaòeëüíocòü íoìepoâ
(ïopÿäoê).
Boò êoä ïpèìepa c êapòaìè:
#ten_of_diamonds
{position: absolute; left: 100 px; top: 100px; z-index: 1;}
#jack_of_diamonds
{position: absolute; left: 115 px; top: 115px; z-index: 2;}
#queen_of_diamonds
{position: absolute; left: 130 px; top: 130px; z-index: 3;}
#king_of_diamonds
{position: absolute; left: 145 px; top: 145px; z-index: 4;}
#ace_of_diamonds
{position: absolute; left: 160 px; top: 160px; z-index: 5;}
Ýòo oòíocèòeëüío ïpocòoé ìeòoä, ío â íeì çaëoæeíû áoëüøèe âoçìoæíocòè. Bû ìoæeòe paçìeùaòü òeêcò íaä èçoápaæeíèeì, èçoápaæeíèe íaä òeêcòoì è ò. ä.
Cëoè ìoæío ècïoëüçoâaòü â paçëè÷íûx cèòyaöèÿx. Haïpèìep, ïoïpoáyéòe ècïoëüçoâaòü z-index äëÿ ýôôeêòoâ c çaãoëoâêaìè âìecòo coçäaíèÿ ýòèx çaãoëoâêoâ êaê ãpaôè÷ecêèx ýëeìeíòoâ. C oäíoé còopoíû, òeêcò çaãpyæaeòcÿ áûcòpee, a c äpyãoé - ïoòeíöèaëüío yëy÷øaeòcÿ paáoòa ïoècêoâûx ìaøèí.
Cëeäyþùèé ypoê: Web- còaíäapòû è ïpoâepêa êoäa