Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Слои в CSS. Основы CSS для начинающих. Урок №16

20.03.2017


11:47


1820


1


Слои в CSS. Основы CSS для начинающих. Урок №16

Слои в CSS. Основы CSS для начинающих. Урок №16

Всем привет!
В сегодняшнем уроке я расскажу о возможности создавать слои в CSS.
Слои в CSS можно сравнить с аппликацией из бумаги, когда сначала наклеиваются на бумагу слои заднего плана (небо, трава, горы и т.д), а потом в конце на все слои приклеиваются деревья и дома.
Можно еще сравнить слои в CSS с программой фотошоп, если кто-то пользовался данной программой, то меня поймет.
Если вы не поняли что это такое, не нужно расстраиваться, так как это только начало статьи, а до конца еще далеко. Так что обязательно все поймете.
Спросите, зачем вообще нужны слои в CSS? Бывают разные случаи, когда какая-то часть сайта закрывает более необходимый контент, например, блок с текстом закрыл всплывающее меню. В таком случае нужно всплывающее меню сделать на слой выше.

Слои в CSS

Свойство «Z-INDEX»
Чтобы создать слои, воспользуйтесь правилом «z-index».Слои нумеруются цифрами. Начинается слой с цифры 1 и т.д. Слои идут по возрастанию и накрывают нижние слои.

Вот наглядный пример:

Слои в CSS. Основы CSS для начинающих. Урок №16

Синтаксис:

z-index: значение (слой);

Значение:
значение задается цифрами от 1 и т.д.

Для примера я предлагаю создать 4 блока в HTML документе:

<div class="blok1">1-ый блок</div>
<div class="blok2">2-ой блок</div>
<div class="blok3">3-ий блок</div>
<div class="blok4">4-ый блок</div>

Что мы сейчас сделаем в CSS?
В CSS мы сделаем так, чтобы:

1-ый блок стал первым слоем. Правило:z-index: 1.
2-ый блок стал вторым слоем. Правило:z-index: 2.
3-ый блок стал третьим слоем. Правило:z-index: 3.
4-ый блок стал четвертым слоем. Правило:z-index: 4.

Итак, давайте посмотрим на весь код, как это будет выглядеть.
В коде мне пришлось добавить каждому блоку смещение с помощью позиционирования блока.

Пример:

<html>
<head>
<title>Блок в css</title>
<style type="text/css">
.blok1 {
border:1px solid #000; /* рамка */
background: #c8e; /* фон блока */
width:80px; /* ширина блока*/
height:150px; /*высота блока*/
position: absolute; /* позиционирование блока*/
padding:10px;/* отступ в нутри блока */
left: 20px; /* отступ слева */
top: 10px;/* отступ с верху */
z-index: 1; /* слой 1*/
}
.blok2 {
border:1px solid #000;
background: #fe5;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 60px;
top: 40px;
z-index: 2;/* слой 2*/
}
.blok3 {
border:1px solid #000;
background: #1e1;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 100px;
top: 80px;
z-index: 3;/* слой 3*/
}
.blok4 {
border:1px solid #000;
background: #c1f;
width:80px;
height:150px;
position: absolute;
padding:10px;
left: 140px;
top: 120px;
z-index: 4;/* слой 4*/
}
</style>
</head>
<body>
<div class="blok1">1-ый блок</div>
<div class="blok2">2-ой блок</div>
<div class="blok3">3-ий блок</div>
<div class="blok4">4-ый блок</div>
</body>
</html>

Результат:

Слои в CSS. Основы CSS для начинающих. Урок №16

В коде можно поменять значения в правиле «z-index».
Хммм :???:! У меня идея :!:. Я вам сейчас дам задание.
Попробуйте сделать так, чтобы блоки шли именно в такой последовательности:

Слои в CSS. Основы CSS для начинающих. Урок №16

Вот и подошли мы к завершению основ CSS. Осталось вам сдать «Тесты» и приступить к практике, где я покажу, как со всеми этими знаниями можно создать красивый сайтик.
Ну все, жду вас на тестах!
Проверим, как я смог вам раскрыть основы CSS.



Случайные записи:

  1. Сетка. Основы bootstrap 3 для начинающих. Урок №4
  2. Как сделать фоновую музыку на сайте – HTML и HTML5
  3. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
  4. Полезные функции php List, Isset, Unset, Empty, Date, Count и Exit. Основы PHP с нуля. Урок №18
  5. Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

Один ответ на статью: “Слои в CSS. Основы CSS для начинающих. Урок №16”

  1. Сергей says:

    Просто, 2й блок меняем на 4 (z-index: 4;/* слой 2*/), а 4й на 2 (z-index: 2;/* слой 4*/)

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?