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

К началу


 

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

1735. СОЦИАЛЬНО-ПСИХОЛОГИЧЕСКИЕ ФАКТОРЫ ЭЛЕКТОРАЛЬНОГО ПОВЕДЕНИЯ 1.52 MB
  ТЕОРЕТИЧЕСКИЕ И МЕТОДОЛОГИЧЕСКИЕ ОСОБЕННОСТИ ИЗУЧЕНИЯ ЭЛЕКТОРАЛЬНОГО ПОВЕДЕНИЯ. МЕТОДИЧЕСКИЕ ПРИЕМЫ ИЗУЧЕНИЯ РЕГИОНАЛЬНОГО ЭЛЕКТОРАЛЬНОГО ПОВЕДЕНИЯ. ИССЛЕДОВАНИЕ СОЦИАЛЬНО-ПСИХОЛОГИЧЕСКИХ ДЕТЕРМИНАНТ ЭЛЕКТОРАЛЬНОГО ПОВЕДЕНИЯ.
1736. СИСТЕМНО-ФУНКЦИОНАЛЬНЫЙ ПОДХОД К ИЗУЧЕНИЮ ГЛАГОЛОВ ДВИЖЕНИЯ СТУДЕНТАМИ-МАРИ В ПРАКТИЧЕСКОМ КУРСЕ РУССКОГО ЯЗЫКА 1.52 MB
  Принципы выделения глаголов движения. Их специфические особенности. Сопоставительный анализ бесприставочных и приставочных глаголов движения в русском и марийском языках как лингводидактическая основа реализации транспозиции и преодоления интерференции. Лингвистические, дидактические и психологические предпосылки обучения бесприставочным и приставочным глаголам движения в системнофункциональном аспекте.
1737. ДВУХУРОВНЕВОЕ МОДЕЛИРОВАНИЕ ДИСКРЕТНЫХ ЭВОЛЮЦИОННЫХ ПРОЦЕССОВ В УСЛОВИЯХ НЕОПРЕДЕЛЕННОСТИ 1.51 MB
  Содержательное описание проблемы моделирования задач землепользования. Необходимость разработки новых методов прогнозирования. Инструментарий фазовых портретов для выявления циклов временного ряда и уточнения прогноза. Математическая постановка векторной задачи покрытия графа 4-циклами (паросочетаниями, звездами). Аппроксимация интервальной задачи покрытия графа 4-циклами векторной задачей.
1738. Энергии связи гиперъядер и их взаимодействие 1.51 MB
  Обзор экспериментальных данных, феноменологический подход, расчет систем небольшого числа частиц, характеристика используемых методов расчета, каркасные функции в расчетах кулоновских и ядерных систем.
1739. СТРУКТУРНО-СЕМАНТИЧЕСКОЕ И ФУНКЦИОНАЛЬНОЕ ОПИ- САНИЕ ЛЕКСИЧЕСКИХ ОККАЗИОНАЛИЗМОВ В РАМКАХ ТЕОРИИ ЭЛОКУТИВНОГО ПОЛЯ 1.51 MB
  Проблема изучения окказионализмов в современном отечественном языкознании. Аспекты изучения окказионализмов в современном отечественном языкознании. Структурно-семантическое и функциональное описание лексических окказионализмов в элокутивном аспекте. Полевая организация лексических окказионализмовэлокутивов в контексте макросистемы элокутивных средств языка/речи.
1740. Формирование культуры общения студентов непедагогических вузов (гуманитарные и технологические специальности) 1.5 MB
  ФОРМИРОВАНИЕ КУЛЬТУРЫ ОБЩЕНИЯ КАК ПСИХОЛОГО-ПЕДАГОГИЧЕСКАЯ ПРОБЛЕМА. ГЕНЕЗИС ПРЕДСТАВЛЕНИЙ О ФОРМИРОВАНИИ КУЛЬТУРЫ ОБЩЕНИЯ. СОДЕРЖАНИЕ, ФОРМЫ И МЕТОДЫ ФОРМИРОВАНИЯ КУЛЬТУРЫ ОБЩЕНИЯ СТУДЕНТОВ НЕПЕДАГОГИЧЕСКИХ ВУЗОВ. ПСИХОЛОГО-ПЕДАГОГИЧЕСКАЯ ГОТОВНОСТЬ СТУДЕНТОВ К ПОЗИТИВНОЙ КОММУНИКАЦИИ.
1741. Система социально-педагогической помощи детям-инвалидам в Ставропольском крае 1.5 MB
  Нормативно-правовое и государственное регулирование психолого-педагогического сопровождения детей-инвалидов в Российской Федерации. Общие виды отклоняющегося развития детей-инвалидов и их категории. Система оказания социально-педагогической помощи детям-инвалидам в Ставропольском крае. Методы профилактики и коррекция развития детей-инвалидов. Система благотворительной помощи детям-инвалидам в Ставропольском крае.
1742. Формирование лизинговых отношений в российской экономике 1.49 MB
  Лизинг как специфическая форма развития арендных отношений. Основные тенденции трансформации лизинговых отношений на современном этапе. Особенности возникновения лизинговых отношений. Проблемы эффективного использования лизинга на российских предприятиях.
1743. СТРУКТУРНО-СЕМАНТИЧЕСКИЕ И ФУНКЦИОНАЛЬНЫЕ ХАРАКТЕРИСТИКИ ЭКОНОМИЧЕСКОЙ ТЕРМИНОЛОГИИ (В РАМКАХ СЕГМЕНТА ТЕРМИНОСФЕРЫ 1.49 MB
  Основные тенденции исследования термина в современной лингвистике. Экономическая терминология как системно-структурное образование. Роль конкретного этнического языка в организации общего терминологического фонда. Структурно-семантическая, морфолого-фонетическая, функциональная адаптация новейших заимствований в терминосфере Рыночная экономика.