Създаване на блок в CSS, ние винаги ясно определени нейните параметри, както и позициониране в определено място на екрана. По този начин, всяка единица има две координати X и Y, които определят позицията на блока на равнината на екрана. Но CSS има и трети, пространственото координира Z, който определя броя на слоя, на която се намира устройството. Т.е. повече координира Z, по-висок слой се намира в сравнение с другите. Например слоя с номер 2 ще се намира по-близо до потребителя, който преглежда вашия профил от броя на слоя 1. слой номер 1, ще се позиционира по-висока от главната страница код.
За създаването на слой в CSS реагира Z-индекс собственост. Стойностите, взети от тях, за да се посочва каталожен номер слой.
Например, може да бъде направена от комбинация от карти известния Royal Flash.
Както можете да видите, всяка карта, леко припокрива другата. Ето как изглежда това в код:
.desatka_buba позиции: абсолютен;
лява: 200px;
отгоре: 200px;
Z-индекс: 1;
>
.valet_buba позиции: абсолютен;
лява: 215px;
отгоре: 215px;
Z-индекс: 2;
>
.dama_buba позиции: абсолютен;
лява: 230px;
отгоре: 230px;
Z-индекс: 3;
>
.korol_buba позиции: абсолютен;
лява: 245px;
отгоре: 245px;
Z-индекс: 4;
>
.tuz_bubna позиции: абсолютен;
лява: 260px;
отгоре: 260px;
Z-индекс: 5;
>
Но в кода на HTML. просто определя съответните чертежи стилове, като например:
и така нататък, можете да получите представа.
Ако една добра сделка с този прост метод, можете да създадете някои доста прилични неща. Например да поставите текст върху изображението, или обратно, за създаване на красиви заглавия. като ефектът от сенките, като че ли по-дълбоки слоеве, за да проучи, можете да създадете изскачащи менюта. и още много други.
Свързани статии