CSS: свойство “Z-индекс”
предосторожность
Эта статья была опубликована более чем год назад, там, возможно, были события.
Пожалуйста, примите это во внимание.
Сегодня мы видим важное свойство CSS, Кроме того, в наследство от предыдущей версии, я CSS3. Я говорю (как вы уже догадались из названия) свойство “Z-индекс“.
свойства “высота” е “ширина” impostarenno высота и ширина, в то время как “Z-индекс” нам нужно переместить элементы в третьем измерении глубина (испеките “с”). Третье измерение перпендикулярно к экрану, и это будет легче понять, для тех, кто знает программу, связанную с использованием уровней.
Представьте экран, стол, на котором разместить несколько игральных карт, так:
В этом примере каждый “бумага” является “ДИВ”, каждый “ДИВ” Он имеет свойство “Z-индекс” другой. Чем ниже значение “Z-индекс”, более “отдаленный” будут карты, но если значение больше, чем предыдущая, DIV будет размещен над другими. CSS используется следующим образом:
#box1 { граница: 1точек черного цвета; высота: 100ПВ; ширина: 80ПВ; позиция: абсолютный; оставил: 15ПВ; Топ: 15ПВ; фон: красный; Z-индекс: 1; } #box2 { граница: 1точек черного цвета; высота: 100ПВ; ширина: 80ПВ; позиция: абсолютный; оставил: 20ПВ; Топ: 30ПВ; фон: зеленый; Z-индекс: 2; } #Box3 { граница: 1точек черного цвета; высота: 100ПВ; ширина: 80ПВ; позиция: абсолютный; оставил: 25ПВ; Топ: 45ПВ; фон: синий; Z-индекс: 3; } #box4 { граница: 1точек черного цвета; высота: 100ПВ; ширина: 80ПВ; позиция: абсолютный; оставил: 30ПВ; Топ: 60ПВ; фон: желтый; Z-индекс: 4; } #box5 { граница: 1точек черного цвета; высота: 100ПВ; ширина: 80ПВ; позиция: абсолютный; оставил: 35ПВ; Топ: 75ПВ; фон: фуксин; Z-индекс: 5; }
В следующем примере, вместо того, чтобы значение было назначено “6” недвижимость “Z-индекс” дель коробка 1:
Объясните значение “Z-индекс” не только установить положение на оси “с”, мама начнет новую иерархию элементов. свойство “Z-индекс” также, принимает отрицательные значения и в случае, если два элемента имеет то же значение будет показано в соответствии с иерархическим порядком стандарт (выше, чем вставляется после).
Для тех, кто хочет поэкспериментировать с примером, показанным, Она опубликована в эта страница.
0 Комментарии