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

К началу


 

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

66509. Проектирование и расчет гидропривода. Элементы гидропривода и гидроавтоматики 327 KB
  Пластинчатый нерегулируемый насос БГ1222М Рабочий объем 16 см3 Номинальная подача 194 л мин Давление на выходе из насоса: номинальное 125 МПа предельное 14 МПа Частота вращения: номинальная 1500 об мин максимальная 1800 об мин минимальная 1200 об мин Мощность: номинальная 565 кВт...
66510. ИНСТРУМЕНТАЛЬНЫЕ И ЛАБОРАТОРНЫЕ МЕТОДЫ ИССЛЕДОВАНИЯ 29.59 KB
  Какие инструментальные методы применяют в акушерстве Из наиболее применяемых методов следует указать: наружную кардиотокографию КТГ кардиография механогис терография актография; ультразвуковое сканирование; допплерографию определение скорости кровотока...
66511. Проектирование баз данных Access 1.36 MB
  Перед созданием реляционной базы данных Access пользователь должен определить, из каких таблиц должна состоять база данных, какие данные автоматизируемой предметной области нужно поместить в каждую таблицу, как связать таблицы.
66512. Логические элементы в Workbench 149.78 KB
  Нарисуем моделируемую схему в программе ElectronicsWorkbench После запуска схемы в логическом анализаторе получили следующее Составим таблицы истинности по 4 значения из логического анализатораи по ним определим название логических элементов...
66513. ДИНАМІЧНІ МАСИВИ 96.5 KB
  Визначити добуток позитивних елементів кожного стовпця матриці А її розмір вводити з клавіатури а елементи розмістити в памяті динамічно. Визначити добуток елементів парних стовпців матриці її розмір вводити з клавіатури а елементи розмістити в памяті динамічно.
66514. Разработка и отладка алгоритмов и программ обработки массивов 784.5 KB
  Дан массив целых чисел А[30]. Заменить все нулевые элементы минимальным. В упорядоченном по невозрастанию массиве чисел определить, есть ли заданное число Z, в противном случае подсчитать количество чисел, небольших Z; кроме того определить, сколько отрицательных чисел в массиве.
66515. Разработка и отладка алгоритмов и программ с применением пользовательских функций 126 KB
  Цель работы: Получить практические навыки в разработке алгоритмов и написании программ на языке С с применением пользовательских функций. Оборудование: IBM – совместимый компьютер, система программирования BC3.1, MVC++ 6.00.
66516. ВЗАИМОДЕЙСТВИЕ С ФАЙЛОВЫМИ СИСТЕМАМИ UNIX/WINDOWS 89.96 KB
  Цель работы — изучение основных файловых операций в ОС UNIX и Windows, работы механизмов перенаправления ввода/вывода, конвейера, механизма управления устройствами ввода-вывода UNIX при помощи специальных файлов устройств, а также с организацией прямого доступа к диску в ОС Windows.