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

К началу


 

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

53297. Healthy lifestyle 40.5 KB
  P1 Drink clean fresh water. Drink at least eight glasses of water every day. Limit soda and caffeine drinks. It is important to eat green and orange vegetables and fruit every day. Fresh vegetables and fresh fruit like bananas and oranges and tomatoes or carrots are the best. P2 Get plenty of rest and sleep. Children need about eight or ten hours of sleep each night. Make time for you self. Walk in the fresh air. Read and listen to soft music.
53298. ДОМАШНІЙ ХІМІЧНИЙ ЕКСПЕРИМЕНТ 63 KB
  Для дослідів буде потрібно невелику кількість овочів, фруктів, харчової соди, оцту, соків, тому, необхідно звернутися до батьків з проханням, не жаліти, якщо дитина зіпсує їх в своїх дослідах, адже вона пізнає навколишній світ, а це - крок у велику науку. Посудом у домашній лабораторії слугуватимуть скляні ампули від пігулок
53299. Характеристика образів повісті Я. Стельмаха «Химера лісового озера, або Митькозавр з Юрківки» 152.5 KB
  Стельмаха Химера лісового озера або Митькозавр з Юрківки. Стельмаха Химера лісового озера або Митькозавр з Юрківки. Стельмаха Химера лісового озера або Митькозавр з Юрківки – Сергієм і Митьком. Які думки у вас виникли коли ви знайшли сандалю що це взуття якогось дослідника якого з’їв Митькозавр.
53300. Вивчення властивостей моноцукрів і дицукрів 102.5 KB
  АКТУАЛЬНІСТЬ ТЕМИ: Програмою предмету передбачено вивчення основних методів дослідження хімічного складу речовини, знання яких необхідні спеціалісту для контролю технологічного процесу обробки сировини, напівфабрикатів, кулінарних і кондитерських виробів. Вивчення теми сприяє розвитку творчого професіоналізму, навиків експериментальної роботи, розвитоку творчого мислення, встановлення причиннно - наслідкових зв´язків, інтересу до пізнавальної діяльності, навиків самостійної роботи з учбовою і науковою літературою.
53301. Хранение, использование и учет прекурсоров в химическом кабинете общеобразовательного учебного заведения 91.5 KB
  Прекурсоры вещества часто используемые при производстве изготовлении переработке наркотических средств и психотропных веществ включённых в Перечень наркотических средств психотропных веществ и прекурсоров утвержденный Постановлением Кабинета Министров Украины от 06. Согласно Закону Украины Об обороте в Украине наркотических средств присихотропных веществ их аналогов и прекурсоров от 15. № 503V необходимо вести строгий учет прекурсоров.
53302. Україна в подіях Північної війни. Повстання гетьмана Івана Мазепи 46.5 KB
  Повстання гетьмана Івана Мазепи. Виявити роль і значення Івана Мазепи в українському національно-визвольному русі. Внутрішня і зовнішня політика Мазепи. Мазепи.
53303. Національно-визвольна війна українського народу проти Речі Посполитої середини ХVІІ ст 64.5 KB
  Нагадую правила гри: за кожне порушення дисципліни викрики підказку журі має право зняти з команди від 2 до 5 балів. Кому розпочинати гру визначається за допомогою жеребкування Отже у нас все готове до початку КВК залишилось побажати тільки успіхів учасникам гри і оголосити склад журі. Оголошується склад журі Змагання сьогоднішнє я відкриваю 1 щиро усіх вас вітаю. Команда Ерудити Любить КВК наш дружний клас І оголосить засідання зараз Ось болільники а ось журі.
53304. Украинско-московский межгосударственный договор 1654 года. Продолжение Национально-освободительной войны 76.5 KB
  Цели: выяснить предпосылки и определить основные положения и значение украинско-московского договора 1654 года, а также дать историческую оценку событиям Национально-освободительной войны в 1654-1655 годах; развивать у учащихся жизненные умения и навыки: работать с историческими источниками и на основе их делать выводы и обобщения, давать оценку историческим событиям, высказывать свою точку зрения по отношению к ним...
53305. Україна в умовах десталінізації (1953 – 1964 рр.) 242.5 KB
  Назвіть події з історії України, які відбувалися після подій всесвітньої історії, визначених у першій колонці, але раніше, ніж події, визначені у третій колонці.