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

К началу


 

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

43. Використання виховних заходів в навчальному закладі 144.5 KB
  За допомогою психолого-педагогічного досвіду студент-практикант надав можливість відкритися учасникам творчо, проявити себе з кращої сторони. Свято закоханих сердець, родини та краси, як приклади проведення массових заходів.
44. Організація міжнародних перевезень та митні транспортні тарифи 143.5 KB
  Організація роботи прикордонних залізничних станцій. Характеристика прикордонних переходів. Види митного контролю. Розрахунки тарифу та додаткових зборів у внутрішньому сполученні. Наявність потужного транспортного потенціалу, сучасних транспортних засобів.
45. Шкільна гігієна середньої загальноосвітньої школи №23 міста Тернополя 154 KB
  Санітарно-гігієнічні вимоги до планування, благоустрою, експлуатації загальноосвітніх шкіл. Гігієнічна оцінка фізичного розвитку і стану здоров`я учнів. Санітарний стан шкільної ділянки в цілому добрий.
46. Проблемы инновационного развития России на современном этапе 185 KB
  Теоретические основы инновационного развития страны, Российский опыт экономического развития. Основные направления развития инновационного бизнеса в России на современном этапе. Определение оптимальной модели дальнейшего развития страны.
47. Технология грузовой и коммерческой работы и экспедирование 164.44 KB
  Основные показатели работы грузовой станции и путей необщего пользования, техническое оснащение грузовых складов станций и путей необщего пользования, выбор оптимального варианта комплексной механизации погрузо-разгрузочных работ.
48. Вирішення проблеми паління, вчивання алкоголю та наркотичних речовин серед сучасної молоді засобами морального виховання 205.5 KB
  Створення технології, спрямованої на подолання та запобігання шкідливих звичок (ШЗ) (алкоголізм, тютюнопаління, наркоманія). активне використання методів стимулювання з метою регулювання, коригування та стимулювання діяльності та поведінки вихованців.
49. Оформлення каталогу творчих робіт на тему: Моделювання та макетування 287.5 KB
  Технології виготовлення аплікації, історичні відомості, система орієнтування, оздоблення акцидентними шрифтами. використання каталогів для рекламних та ознайомчих, інформаційних цілей, підготовка та вибір матеріалів до друку.
50. Securities exchange. Most common and most unrestricted type of bank 304 KB
  Most common and most unrestricted type of bank, allowed the most latitude in its services and investments are called, despite the measures taken last year to cut their risky investments and the overall size of their portfolios.
51. История создания и специфика работы пистолета-пулемета Томпсона 533.92 KB
  Томми-ган, автомат Томпсона, пистолет-пулемет Томпсона, чикагское пианино, траншейная метла, дьявольская машина смерти и даже двигатель торговли – все это названия самого гангстерского в мире оружия, которое стало символом американских гангстерских воин и хорошо зарекомендовало себя на полях сражений.