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

К началу


 

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

43979. ОДЕРЖАННЯ ГАЛОГЕНІЗОТІОЦІАНАТІВ ТА ДОСЛІДЖЕННЯ ЇХ ВЗАЄМОДІЇ З ГІДРОКСИБЕНЗАЛЬДЕГІДАМИ 2.41 MB
  Дотримання правил техніки безпеки є обовязковим для кожного працівника під час роботи в хімічній лабораторії. Більш досвідчені працівники мають створювати такі умови праці в лабораторії при яких було б неможливе недбале ставлення до вимог техніки безпеки. До роботи в хімічній лабораторії допускаються особи які пройшли медичне обстеження та інструктаж з техніки безпеки.
43980. Исследование вопросов оформления и учета операций в иностранной валюте банками Республики Беларусь и разработка путей их развития 403 KB
  Понятие и сущность операций в иностранной валюте. Внебиржевой порядок Основные направления развития операций в иностранной валюте в Республике Беларусь. Целью работы является исследование вопросов оформления и учета операций в иностранной валюте банками Республики Беларусь и разработка путей их развития. Исходя из поставленной цели предметом работы является порядок оформления и учета операций в иностранной валюте банками Республики Беларусь.
43981. Правила складання і оформлення актів 240.5 KB
  Сукупність взаємоповязаних документів, які застосовуються у певній сфері діяльності, становить систему документації. Нині діють уніфіковані системи. Однією з найпоширеніших є організаційно - розпорядча документація (ОРД), використовувана в оформленні управлінських рішень.
43982. Цифровая система видеонаблюдения 2.38 MB
  С развитием цифровых технологий эта задача может быть решена внедрением системы видеонаблюдения английская аббревиатура CCTV Closed Circuit TeleVision Системы замкнутого телевидения. В зависимости от типа используемого оборудования системы видеонаблюдения делят на аналоговые и цифровые. Аналоговые системы видеонаблюдения используют там где необходимо организовать видеонаблюдение в небольшом числе помещений и информацию с видеокамер записывать на видеомагнитофон. Для обеспечения безопасности особо ответственных или...
43983. Организация автоматизированного учета и контроля деятельности религиозных организаций с использованием ПЭВМ (на примере администрации Октябрьского р-на г. Минска) 12.1 MB
  Данная активизация устанавливает определенные проблемы по традиционному учету деятельности религиозных организаций. Целью данной дипломной работы является организация автоматизированного учета и контроля деятельности религиозных организаций с использованием ПЭВМ на примере администрации Октябрьского рна г. Целью данной дипломной работы является организация автоматизированного учета и контроля за деятельностью религиозных организаций на примере администрации Октябрьского рна г. В связи с поставленной целью были намечены следующие задачи: ...
43984. Кредитование во внешнеторговой деятельности 288.5 KB
  Средства для международного кредита мобилизуются на международном рынке ссудных капиталов, на национальных рынках ссудного капитала, а также за счет использования ресурсов государственных, региональных и международных организаций. Размер кредита и условия его представления фиксируются в кредитном соглашении (договоре) между кредитором и заемщиком
43985. Банковская система. Банковские риски и методы их регулировани 701 KB
  В первом случае речь идет о шансах получения прибыли а во втором о рисках. Предоставляя ссуды коммерческий банк исходит прежде всего из рыночных критериев прибыльности риска и ликвидности. Значение посреднической функции коммерческих банков для успешного развития рыночной экономики состоит в том что они своей деятельностью уменьшают степень риска и неопределенности в экономической системе. Именно такая неопределенность и повышенный уровень риска это плата за полученную экономическую свободу хотя имеющаяся экономическая свобода еще...
43986. Разработка методику проведения контроля с использованием заданий нестандартной формы по теме «Логарифмическая функция» 1.82 MB
  Обилие литературы по проблеме мотивации и мотивов сопровождается и многообразием точек зрения на их природу что вынуждает некоторых психологов впадать в излишний пессимизм и говорить о практической неразрешимости проблемы. Общим недостатком существующих точек зрения и теорий является отсутствие системного подхода к рассмотрению процесса мотивации
43987. Основы обеспечения нравственного становления личности старшеклассников средствами литературы 237.5 KB
  Теоретические основы становления и современного состояния теории нравственного воспитания. Становление теории нравственного воспитания в истории педагогики Анализ современного состояния теории нравственного воспитания. Факторы или условия совершенствования нравственного воспитания в школе