| Kosten | Среда, 05 Сентября 2018, 02:22 | Сообщение 1 |
| В этой статье узнаем, как можно поместить слой элемента на задний или передний фон плана, где все будет сделано с помощью 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 свойством появится за другим элементом.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Вторник, 11 Сентября 2018, 01:59 | Сообщение 2 |
|
| Продолжаем тему, как можно перенести слой или взять элемент и выставить его на задний фон, где по умолчанию установлен передний. Все это делается при помощи стилистики 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.
Демонстрация
| | Страна: (RU) |
| |
