• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Вывод слоев с использованием Z-индекса на CSS (Слои на задний и передний план при помощи CSS: z-index)
Вывод слоев с использованием Z-индекса на CSS
Kosten
Среда, 05 Сентября 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В этой статье узнаем, как можно поместить слой элемента на задний или передний фон плана, где все будет сделано с помощью CSS. Чтоб понятнее было, то здесь будет создавать такую аппликацию, где как пример, идет лист бумаги по вверх другой. Только в нашем случай будет элемент дизайна, что идет в полу прозрачном виде, что при создании получится слой.

Свойство z-index CSS часто запускает как новых, так и опытных разработчиков. Наша цель, это свести несколько сложную спецификацию к трем основным моментам, которые должны облегчить боль в большинстве случаев.



Позиционирование элементов

Это проблема номер один и исправляет большинство проблем с z-index. Если элемент не имеет свойство положения, такие как absolute, relative, fixed или независимо от того, любое значение Z-индекс игнорируется. Значение по умолчанию для свойства position является static, а статические элементы не имеют значения z-index, за пределами порядка, в котором они отображаются.

Технология укладки

Порядок укладки просто, если вы понимаете, как это работает. Блок 1 и все внутри него имеют z-индекс, как и все в блоке 2. Элемент с более высоким z-индексом в блоке 2 не отображается ни о чем в блоке 1, если блок 1 (в целом) имеет более высокий z-индекс.

Для этого нужен пример:

HTML

Код
<div id="msastickun-rameworka-1"><div id="sapkies-centisugal"></div></div>
<div id="msastickun-rameworka-2"></div>


CSS

Код
#msastickun-rameworka-1 {
    position: absolute;
    width: 215px;
    height: 225px;
    top: 8px;
    left: 8px;
    background-color: #989191;
    z-index: 1;
}

#sapkies-centisugal {
    position: relative;
    width: 95px;
    height: 95px;
    margin: 19px;
    background-color: #717171;
    z-index: 100;
}

#msastickun-rameworka-2 {
    position: absolute;
    width: 195px;
    height: 195px;
    top: 58px;
    left: 58px;
    background-color: #5d5858;
    z-index: 2;
}


Как видим, что идет как слоеный пирог, где все элементы идут под своей палитрой цвета.

Позиционирование и визуализация блока

Теперь для чего-то, что кажется странным сначала, то почти все, что отображает контент до его отображения, получает значение z-index, например opacity и transform. Обычно это не будет проблемой, но может привести к неожиданным результатам, скажем, если вы ожидаете, что элемент с opacity свойством появится за другим элементом.

Демонстрация
Прикрепления: 1777980.png (2.7 Kb)
Страна: (RU)
Kosten
Вторник, 11 Сентября 2018 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Продолжаем тему, как можно перенести слой или взять элемент и выставить его на задний фон, где по умолчанию установлен передний. Все это делается при помощи стилистики CSS, а если говорить точнее, то здесь задействуем свойства z-index.

HTML

Вот как выглядят 3 последовательных дива без указания значения z-index



Код
<div class="lodumakgem">None z-index</div>
<div class="lodumakgem2">None z-index</div>
<div class="lodumakgem3">None z-index</div>


Выставим им какие-то значения(пример №2)



Код
<div class="lodumakgem4">z-index = 2</div>
<div class="lodumakgem5">z-index = 1</div>
<div class="lodumakgem6">z-index = 0</div>


Здесь будет див с большим z-index внутри дива на заднем плане(пример №3)



Код
<div class="lodumakgem7">z-index = 3</div>
<div class="lodumakgem8">z-index = 0<div class="lodumakgem10">z-index = 10</div></div>
<div class="lodumakgem9">z-index = 4</div>


CSS

Код
div {position: absolute; text-align:center; font-weight:bold;}
div.lodumakgem {width:100px; height:100px;  background:#1d6f1d; left:0; top:50px;}
div.lodumakgem2 {width:100px; height:100px; background:#960c0c; left:50px; top:100px;}
div.lodumakgem3 {width:100px; height:100px; background:#187118; left:100px; top:150px;}
div.lodumakgem4 {width:100px; height:20px; padding:80px 0 0 0;  background:#006600; left:0; top:300px; z-index:2;}
div.lodumakgem5 {width:100px; height:20px; padding:80px 0 0 0; background:#990000; left:50px; top:350px; z-index:1;}
div.lodumakgem6 {width:100px; height:20px; padding:80px 0 0 0; background:#99FF66; left:100px; top:400px;}
div.lodumakgem7 {width:200px; height:200px;  background:#086308; left:0; top:550px; z-index:-3;}
div.lodumakgem8 {width:200px; height:200px; background:#990000; left:150px; top:650px; z-index:-10;}
div.lodumakgem9 {width:200px; height:200px; background:#8af753; left:300px; top:750px; z-index:-4;}
div.lodumakgem10 {width:150px; height:150px; background:#6600FF; left:20px; top:20px; z-index:1000;}


Предоставленные CSS-стили для 3 DIV с заданными z-index.

Демонстрация
Прикрепления: 8745713.png (5.2 Kb) · 0577696.png (4.2 Kb) · 3142422.png (8.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Вывод слоев с использованием Z-индекса на CSS (Слои на задний и передний план при помощи CSS: z-index)
  • Страница 1 из 1
  • 1
Поиск: