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

К началу


 

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

33152. Романтический образ Тальони 15.04 KB
  В 1832 году в Парижской Опере был впервые показан балет Филиппо Тальони Сильфида. Этот балет Тальони сочинил для своей дочери знаменитой балерины Марии Тальони. Предполагается что впервые поднялась в танце на пальцы и Мария Тальони.
33153. Методические рекомендации по работе с разными категориями детей. Поддержание дисциплины в отряде 48.5 KB
  Если один взрослый запретил чтолибо а другой разрешил если один сказал: Надо сделать так а второй – Нет подругому это приводит тому что ни один вожатый не имеет авторитета в глазах детей и отряд становится неуправляемым. В лагере педагогам приходится достаточно часто сталкиваться с проблемой агрессивного поведения детей. На разных возрастных этапах проявление агрессивности у детей различно.
33154. КОЛЛЕКТИВНЫЕ ТВОРЧЕСКИЕ ДЕЛА 17 KB
  Тогда ты и сам сможешь придумать дела. малым группам; многое зависит от того кто станет ведущим этого дела; экономь время Времени на подготовку не должно быть много или мало: только в “самый разâ€. Творческая подготовка конкурсов и дел участие в общелагерных делах.
33155. Мозговой штурм. Деловая игра для педагогов 34 KB
  Один из вариантов методики мозгового штурма хорошо знаком нам по любимой не одним поколением телезрителей передаче Что Где Когда. Я думаю что для начинающего психолога мучительно размышляющего над вопросом как ему начать работу с педагогами методика мозгового штурма может стать первым шагом в этом направлении.Хочу предложить один из самых простых вариантов методики мозгового штурма который может быть реализован на педагогическом совете в процессе психологического тренинга учителей или как отдельное специальное мероприятие.
33156. НАЗВАНИЯ ОТРЯДОВ И ДЕВИЗЫ 39.5 KB
  ОбаНа Мы не панки не шпана мы ребята ОбаНа. Обана Обана это чудо Обана это класс мы живем совсем не худо вы соскучитесь без нас.
33157. Никогда не заблудишься ! (дополнение к Ориентированию) 20 KB
  Крона деревьев лучше развита на юге. Кора березы на юге эластичнее и светлее. Пологий склон муравейника на юге.
33158. Проведение смены для очень маленьких детей ( самый маленький и предпоследний отряд в лагере - 6-8 лет ) 72 KB
  Команды каждый раз меняем. Под словом эстафета понимается прохождение команды детей по маршруту по карте на которой отмечены места где находятся этапы. Команды одновременно выбегают с начальной точки и проходят все этапы по порядку но начальные этапы сдвинуты и команды встречаются только вовремя перебежек с этапа на этап. Под КВН понимается такое мероприятие в котором участвует несколько команд им выдаются задания и или команда целиком выполняет его или часть команды или по одному участнику.
33159. Клуб «Пластилиновые краски» 119.5 KB
  Ход занятия: Ребята вспоминают приемы рисования пластилином. Ход занятия: Знакомство 10 мин. 10 мин. 30 мин.
33160. Примерный план проведения сбора «Планирование деятельности отряда и дел лагеря» 22 KB
  Задачи: диагностика участников сбора для понимания мотивов участия в деятельности отряда и лагеря организация обмена информацией; обучение формам общения для их дальнейшего применения. Ход сбора: 1. Задача первою этапа сбора вывести ребят на размышления о том Что такое человек Чем он отличается от других существ Что такое гармонично развитый человек .