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

К началу


 

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

66937. Рідна земля, живи! Виступ екологічної агітбригади 76.5 KB
  Мета: донести до людей значення екологічних проблем, зокрема, характерних для рідного краю; залучати учнів до агітаційної роботи з даного питання; виховувати любов до планети Земля, сприяти хоча б частковому вирішенню екологічної ситуації.
66938. Даруйте радість людям – і стане світ багатшим 53.5 KB
  Виховувати в учнів почуття доброти чуйності милосердя поваги до людей; формувати активну життєву позицію яка проявляється в дієвій допомозі людям; формувати в учнів уміння формулювати судження виховувати високі моральні якості. Добро спішіть творити люди. Живіть добро звершайте Та нагород за це не вимагайте.
66939. «Сумні дати серця» (сторінками життя Василя Стефаника) 120.5 KB
  Мета:познайомити учнів із життєвим шляхом українського письменника Василя Стефаника, розкрити трагізм його життя; розвивати чуйність, увагу, спостережливість; виховувати почуття патріотизму, любові до України, її синів. У додатку – презентація «Надто добрий знавець народної мужицької душі (життя і творчість В.Стефаника)».
66940. Професія педагога: «за» і «проти» 38.5 KB
  Слово суддям заключне слово класного керівника хід класної години Класний керівник: Сьогодні моє слово до вас мої вихованці. На нашому ринзі незвичайна і дуже відповідальна зустріч зустріч захисників і противників професії педагога. У правому куті команда захисників професії.
66941. Внеклассное мероприятие по английскому языку «Великобритания» 35.5 KB
  Thank you, and now I want you to know more about our teams. Let introduce with our teams. The competition consists of several tasks. The 1st task is to answer the questions about Great Britain. If your answer is correct the team will get one point. If your answer is wrong the second team will be allowed to give the answer.
66942. Досліджую свою оселю 72.5 KB
  Мета: вчити учнів досліджувати своє довкілля, робити висновки зі своїх досліджень, формувати у дітей уявлення про різноманітність архітектурних споруд, викликати інтерес до пізнання через дослідження, розвивати прагнення прикрасити, зробити комфортнішою свою оселю...
66943. Від пірамід до хмарочосів 1.16 MB
  Мета заходу: ознайомити учнів – випускників шкіл з професією будівельника, показати велич та красу цієї професії, довести, що професія будівельника – це постійний пошук та нескінченна творчість, допомогти дитині зробити професійний вибір відповідно своїм здібностям, інтересам, нахилам.
66944. Закріплення звукового значення букви «ґе». Опрацювання тексту «Ґави і Галаган» 76 KB
  Хід уроку Організаційний момент Вчитель Стали діти рівненько привітайте один одного посмішками починаємо наш урок читання. Рідну мову ми вивчаємо ЇЇ любимо не забуваємо Вчитель Як ми будемо працювати Учні Працюватимемо старанно. Щоб почути у кінці Що у нашім першім класі Діти просто молодці...
66945. ПРОЩАВАЙ, БУКВАРИКУ, НАШ РОЗУМНИЙ ДРУЖЕ! МИ ТОБІ, БУКВАРИКУ, ДЯКУЄМО ДУЖЕ! 153 KB
  Мета. Узагальнити і систематизувати знання учнів з навчання грамоти, розвивати мовлення, логічне мислення, вміння читати, спостережливість, увагу,допитливість. Виховувати повагу один до одного, інтерес до навчання. Під музику до зали заходять діти.