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

К началу


 

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

28976. Выход из революционного кризиса. Столыпинская модернизация России 48 KB
  Столыпинская модернизация России 3 июня 1907 правительство осуществило государственный переворот и 2 Дума февральиюнь 1907 была распущена. Столыпин то она получила названия Столыпинской. Столыпиным предельно четко: Нам нужна Великая Россия . Значительная часть столыпинских законопроектов была направлена на улучшение труда и быта различных категорий служащих торговых железнодорожных почтовых телеграфных ремесленников учителей начальной и средней школы преподавателей высшей школы членовкорреспондентов академиков...
28977. Россия в условиях 1-й мировой войны и общенационального кризиса 38.5 KB
  Россия в условиях 1й мировой войны и общенационального кризиса. Боевые дествия Поводом к началу Первой мировой войны послужило убийство сербскими националистами в боснийском городе Сараево 15 июня 1914 г. вручил правительству ноту с объявлением войны. Принятые Россией накануне войны программы развития армии и флота предполагалось выполнить примерно к 1917 г.
28978. Демократическая революция 1917г в России и ее итоги 31.5 KB
  В городах появились очереди стояние в которых было психологическим надломом для сотен тысяч рабочих и работниц. Начало первым беспорядкам положила забастовка рабочих Путиловского завода 17 февраля. Рабочие завода требовали увеличения расценок на 50 и приёма на работу уволенных рабочих. К толпам рабочих присоединялись тысячи случайных людей: подростков студентов мелких служащих интеллигентов.
28979. Мировая цивилизация в начале XXI века. Глобальные проблемы человечества и пути их разрешения 39.5 KB
  Теперь приведём главные глобальные проблемы человечества: Проблема мира и разоружения предотвращение новой мировой войны; Экологическая проблема; Демографическая проблема; Энергетическая и сырьевая проблема; Проблема использования Мирового океана; Глобальные проблемы человечества стали важным объектом междисциплинарных исследований в которых участвуют и общественные и естественные и технические науки. 1 Проблема мира: На протяжении нескольких послевоенных десятилетий проблема войны и мира предотвращения новой мировой войны была...
28980. История университета 29.5 KB
  Открыто 15 филиалов ИНЖЭКОНА в России в таких городах как Апатиты Анадырь Альметьевск Выборг Кизляр Мурманск Певек Псков Тверь Тихвин Чебоксары Череповец. Ежегодно в университете проходят профессиональную подготовку по 32 специальностям более 25000 студентов из России а также из стран ближнего зарубежья Европы Азии Африки Латинской Америки. Наши выпускники работают на крупнейших предприятиях в компаниях коммерческих фирмах и банках СевероЗападного региона по всей России за рубежом.
28981. Проблемы и противоречия современного периода развития российского общества 25 KB
  Основное противоречие современного этапа развития российского общества заключается в необходимости реформирования всех сфер деятельности переоценке традиционных ориентиров и ценностей открытости для контактов с другими государствами и одновременно сохранении национальной идентичности и этнической самобытности при соблюдении национальных интересов. Люди признают что роль государства в решении проблем региональной и национальной безопасности приоритетна. Для оптимизации государственного и общественного понимания проблем национальной...
28982. ИТ экспертных систем: назначение, структура, функционирование 28.5 KB
  Базы знаний содержат факты описывающие предметную область а так же качественную взаимосвязь между ними как правило в форме правил. Интерпретатор осуществляет обработку знаний в БЗ путем перебора правил правило за правилом. модуль создания системы служит для пополнения базы знаний а также для модернизации экспертной системы.
28983. Модели данных 28.5 KB
  Модель данных – совокупность структур данных и операций их обработки отражает записи и взаимосвязи между ними. Модели данных: 1 иерархическая – в виде иерархии в которой данные размещены по уровню подчиненности древовидная структура. Основные понятия: 1 таблица – совокупность записей одной структуры представляет один объект БД; 2 запись – совокупность логически связанных полей строка таблицы; 3 поле – элементарная единица данных которая соответствует определённому реквизиту столбец.
28984. Понятие и структура СУБД 40.5 KB
  СУБД – совокупность языковых и программных средств предназначенных для создания и ведение использование БД. Структура СУБД. При помощи отладчиков происходит объединение отдельных блоков СУБД.