12794

Наслоение с помощью z-index (Слои)

Практическая работа

Информатика, кибернетика и программирование

Наслоение с помощью zindex Слои CSS оперирует в трёх измерениях высота ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря упорядочивать элементы так чтобы они перекрывали...

Русский

2013-05-03

21.24 KB

2 чел.

Наслоение с помощью z-index (Слои)

CSS оперирует в трёх измерениях - высота, ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались.

Для этого вы можете присвоит каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.

Скажем, мы играем в покер и у нас - royal flush. Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index:

При этом номера идут подряд (1-5), но того же результата можно добиться и при использовании 5 различных номеров. Важна хронологическая последовательность номеров (порядок).

Вот код примера с картами:

#ten_of_diamonds {

position: absolute;

left: 100px;

bottom: 100px;

z-index: 1;

}

#jack_of_diamonds {

position: absolute;

left: 115px;

bottom: 115px;

z-index: 2;

}

#queen_of_diamonds {

position: absolute;

left: 130px;

bottom: 130px;

z-index: 3;

}

#king_of_diamonds {

position: absolute;

left: 145px;

bottom: 145px;

z-index: 4;

}

#ace_of_diamonds {

position: absolute;

left: 160px;

bottom: 160px;

z-index: 5;

}

  •  Показать пример 

Это относительно простой метод, но в нём заложены большие возможности. Вы можете размещать текст над изображением, изображение над текстом и т. д.

Задание: поэкспериментируйте с “картами”, меняя значения z-index

Резюме

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

К началу


 

А также другие работы, которые могут Вас заинтересовать

71266. Товарищество собственников жилья 291 KB
  В изменившейся ситуации, когда жилищный фонд переходит в основном в собственность отдельных граждан, становится частным, требуются новые подходы к его управлению. По сообщениям некоторых средств массовой информации доля частной собственности в жилом секторе России уже превышает 75% от всего жилого фонда.
71267. ВНЕШНИЙ ГОСУДАРСТВЕННЫЙ ДОЛГ РФ 224.57 KB
  В любой стране существуют проблемы и трудности, которые необходимо решить и преодолеть, чтобы занять достойное место в мире. Это проблемы экономического, социального, политического, духовного характеров, которые очень важны, взаимосвязаны и требуют решения.
71268. Работа в СУБД Microsoft Access и электронных таблицах Microsoft Excel 798.07 KB
  Практически все области деятельности современного общества развиваются на базе все более широкого применения информационных технологий. Электронные таблицы Microsoft Excel – это очень мощное средство создания и ведения различных электронных документов.
71269. Анализ выполнения плана отгрузки изделий за третий месяц периода 361 KB
  В предметной области комплекса задач, к которой относится и задача проверки выполнения плана отгрузки продукции заказчикам, рассматриваются процессы планирования и учета выпуска изделий на предприятии, сдача готовых изделий на склады и отгрузка готовой продукции заказчикам в соответствии...
71270. Проблемы сохранения культурного наследия. Социально-экономические и правовые аспекты сохранения историко-культурного наследия Санкт-Петербурга 236.86 KB
  Безусловно, данная проблема является очень актуальной, и мы решили провести исследование, как люди относятся к тому, что архитектурные постройки Петровских времен меняют на современные стеклянные бизнесс-центры, которые по стилю совершенно не вписываются в «историческое» окружение.
71273. Системы управления автоматизированным технологическим оборудованием. История развития вычислительной техники 1.15 MB
  Период становления отечественной электронной вычислительной техники занимает промежуток времени с момента появления в 1946 г. первой ЭВМ ЭНИАК и до 1955 г. Начиная с 1955 г. каждые последующие пять лет в вычислительной технике обновлялись конструктивно-технологические...
71274. Накопители 499.5 KB
  Магазинные загрузочные устройства МЗУ комплекс функциональных механизмов предназначенных для приемки в ориентированном положении изделий хранения с расположением их в один ряд и автоматической выдачи изделий в рабочую зону технологических машин или в зону захвата...