StepkinBlog.top
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
20.03.2017
11:47
8557
1
Слои в CSS. Основы CSS для начинающих. Урок №16
Всем привет!
В сегодняшнем уроке я расскажу о возможности создавать слои в CSS.
Слои в CSS можно сравнить с аппликацией из бумаги, когда сначала наклеиваются на бумагу слои заднего плана (небо, трава, горы и т.д), а потом в конце на все слои приклеиваются деревья и дома.
Можно еще сравнить слои в CSS с программой фотошоп, если кто-то пользовался данной программой, то меня поймет.
Если вы не поняли что это такое, не нужно расстраиваться, так как это только начало статьи, а до конца еще далеко. Так что обязательно все поймете.
Спросите, зачем вообще нужны слои в CSS? Бывают разные случаи, когда какая-то часть сайта закрывает более необходимый контент, например, блок с текстом закрыл всплывающее меню. В таком случае нужно всплывающее меню сделать на слой выше.
Слои в CSS
Свойство «Z-INDEX»
Чтобы создать слои, воспользуйтесь правилом «z-index».Слои нумеруются цифрами. Начинается слой с цифры 1 и т.д. Слои идут по возрастанию и накрывают нижние слои.
Вот наглядный пример:
Синтаксис:
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>
Результат:
В коде можно поменять значения в правиле «z-index».
Хммм 
! У меня идея 
. Я вам сейчас дам задание.
Попробуйте сделать так, чтобы блоки шли именно в такой последовательности:
Вот и подошли мы к завершению основ CSS. Осталось вам сдать «Тесты» и приступить к практике, где я покажу, как со всеми этими знаниями можно создать красивый сайтик.
Ну все, жду вас на тестах!
Проверим, как я смог вам раскрыть основы CSS.
Случайные записи:
- Слои в CSS. Основы CSS для начинающих. Урок №16
- Работа со строками в php. Основы PHP с нуля. Урок №7
- Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15
- Вывод переменной и строки в php на экран. Основы PHP с нуля. Урок №6
- Таблицы. Основы bootstrap 3 для начинающих. Урок №13
Просто, 2й блок меняем на 4 (z-index: 4;/* слой 2*/), а 4й на 2 (z-index: 2;/* слой 4*/)