Cookie

CSS: свойство “Z-индекс”

Опубликовано TheJoe на

Приблизительное время чтения: 2 минут

предосторожность


Эта статья была опубликована более чем год назад, там, возможно, были события.
Пожалуйста, примите это во внимание.

Сегодня мы видим важное свойство 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-индекс” также, принимает отрицательные значения и в случае, если два элемента имеет то же значение будет показано в соответствии с иерархическим порядком стандарт (выше, чем вставляется после).

Смотри сюда:  Javascript: автоматически открывать внешние ссылки в новом окне

Для тех, кто хочет поэкспериментировать с примером, показанным, Она опубликована в эта страница.


TheJoe

Я держу это в качестве хобби блог от 2009. Я графики энтузиастов, технология, Программное обеспечение с открытым исходным кодом. Среди моих статей не будет трудно найти о музыке, и некоторые личные размышления, но я предпочитаю, чтобы направить линию блога в основном технологии. Для получения дополнительной информации связаться со мной.

0 Комментарии

оставьте ответ

Заполнитель аватара

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатывается комментарий данных.