Ópoê 15:
Hacëoeíèe c ïoìoùüþ z-index (Cëoè)

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:
êapòèíêa

Ï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ì è ò. ä.

Peçþìe

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

Haçaä

Bâepx