Как сделать слой сверху в html

Как сделать слой сверху в html



sdcvoy.ru



Учебник по css 2.1

CSS 2.1

Главная » Css » Sloi-v-css-svojstvo-z-index

30 Июн 2015

Автор: Александр Побединский

Приходит время и любой начинающий верстальщик или веб-разработчик сайтов сталкивается с такой проблемой, как слои. Хотя почему проблема? Если изучите этот урок никаких проблем возникнуть не должно. Слои в CSS накладываются друг на друга, то есть один блок может внезапно у вас закрыть другой и т.д. Один раз я и сам столкнулся с неприятной проблемой, когда рекламный блок закрыл часть меню (я правда быстро решил эту проблему). Запомните, что любые позиционированные элементы на страничке могут накладываться друг на друга.

До этого урока мы с вами рассматривали только два измерения. А теперь представьте ещё одно измерение перпендикулярное экрану. Представили? Так вот при верстке сайта и при наложении слоёв друг на друга можно управлять этим наложением. Вообразите некоторую ось Z перпендикулярную экрану. Наложение элементов по этой оси будет контролироваться свойством z-index

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

z-index: число

Приведу небольшой пример использования данного свойства:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>z-index</title> <style type="text/css"> .box{ float:left; border:1px solid #0CF; width:35%} #l1, #l2, #l3, #l4 { position: relative; / Относительное позиционирование / } #l1, #l3 { font-size: 60px; color: #000080; } #l2, #l4 { top: -75px; left: 5px; color: #ffa500; font-size:80px; } #l1 { z-index: 2; } #l2 { z-index: 1; } #l3 { z-index: 4; } #l4 { z-index: 3; } </style> </head> <body> <div class="box"> <p>Слой 1 сверху</p> <div id="l1">Слой 1</div> <div id="l2">Слой 2</div> </div> <div class="box"> <p>Слой 4 снизу</p> <div id="l3">Слой 3</div> <div id="l4">Слой 4</div> </div> </body> </html>

В результате должно получиться следующее:

Свойство z-index в CSS

Следует отметить, что свойство z-index работает только для тех элементов, у которых задано значение position.

Метки: z-index, слои в css

Использование плавающих блоков в CSS

Заключение. Что дальше?





наверх
Как сделать слой сверху в html

Похожие записи:



Гидравлический клапан на схеме

Дуб узор схема вышивки

Вязание спицами для женщин шапка шарф схемы