Как сделать слои в html

Обновлено: 06.07.2024

Тег (англ. layer — слой) — тег-контейнер, создает слой с абсолютным позиционированием.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

Атрибуты

above	имя нижнего, по сравнению с текущим, слоя
background	URL фоновой картинки
below	имя верхнего, по сравнению с текущим, слоя
bgcolor	цвет фона
clip	координаты видимой области слоя
height	задает высоту слоя
id	уникальный идентификатор
left	смещение слоя влево относительно родительского контейнера
name	уникальное имя слоя
onblur	потеря фокуса элементом
onfocus	получение фокуса элементом
onload	окончание загрузки слоя
onmouseout	смещение указателя мыши с элемента
pagex	х-коотдината абсолютного позиционирования слоя
pagey	y-коотдината абсолютного позиционирования слоя
src	URL документа, который будет показан в границах слоя
top	смещение слоя вниз относительно родительского контейнера
visibility	определяет видимость слоя. Возможные варианты show, hide, inherit
width	задает ширину слоя
z-index	высота слоя. Обычно используется в случае перекрывающихся слоев

Пример

По умолчанию все элементы на странице располагаются последовательно:

- блочные элементы располагаются один под другим,
- строчные элементы располагаются один за другим.

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

Позиционирование осуществляется при помощи свойства position . Оно устанавливает способ позиционирования и может быть применено ко всем элементам.

Различают абсолютное и относительное позиционирование элементов.

Абсолютное позиционирование

Значение absolute свойства position устанавливает абсолютное позиционирование элемента.

При абсолютном позиционировании координаты нового положения элемента задаются с помощью свойств top , right , bottom и left :

- относительно краев окна браузера, если родительского элемента нет или если для него свойству position присвоено значение static (значение по умолчанию).

- относительно краев родительского элемента, если для него свойству position присвоено значение absolute , fixed или relative .

Отличительной особенностью абсолютного позиционирования является освобождение элементом ранее занимаемого пространства: освобожденная область может быть занята другим элементом.

При значении fixed свойства position элемент также будет абсолютно позиционированным. Но при этом элемент фиксируется в точке с координатами, заданными свойствами top , right , bottom и left : он не прокручивается вместе с содержимым страницы.

Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.

Текст сместился на место, ранее занимаемое пингвином. А пингвин зафиксирован!

В приведенном примере для пингвина во втором абзаце установлено значение fixed для свойства position и заданы координаты при помощи ключевых слов top и right .

Отсчет координат ведется от краев окна браузера, так как у родительского элемента (абзаца - тега

) свойство position не указано, следовательно, оно принимает значение по умолчанию static .

Таким образом пингвин расположен на расстоянии 300 пикселей от верхнего края и 220 пикселей от правого края окна браузера. И он не прокручивается вместе с содержимым страницы: Вы все время его видите в одном и том же фиксированном месте (смотрите направо. Но при уменьшении разрешения экрана, изображение все больше смещается к центру страницы, а при просмотре с мобильных устройств, оно располагается уже слева).

Относительное позиционирование

Значение relative свойства position устанавливает относительное позиционирование элемента.

При относительном позиционировании координаты нового положения элемента также задаются с помощью свойств top , right , bottom и left .

Но отсчет координат ведется относительно первоначального места положения элемента. При этом ранее занимаемое пространство он не освобождает, и это место не могут занять другие элементы.

Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.

Текст не сместился на место, ранее занимаемое пингвином: оно как бы осталось за ним!

В приведенном примере для пингвина во втором абзаце установлено значение relative для свойства position и заданы координаты при помощи ключевых слов bottom : 10px и left : 100px .

Отсчет координат ведется относительно первоначального места положения пингвина.

Слои в CSS. Координата Z

Условно каждый элемент имеет две координаты (так как мы имеем дело с плоскостью) X и Y , которые определяют его положение на странице.

В CSS есть возможность задавать для элементов третью - пространственную координату Z , тем самым имитируя третье измерение и позволяя элементам накладываться друг на друга.

Выходит так, как будто мы работаем со слоями. Это понятие знакомо тем, кто имел дело с каким-либо графическим редактором, например с Adobe Photoshop .

Свойство z-index реализует эту возможность: оно задает значение координаты Z , определяя номер слоя, на котором располагается элемент, и тем самым устанавливая порядок наложения элементов друг на друга

Значением свойства z-index может быть любое целое положительное число или 0 . Чем больше значение Z , тем выше слой располагается по отношению к слоям с меньшим значением координаты.

Например, слой с номером 3 будет ближе к пользователю, чем слои с номерами 2 и 1 или слой без заданной координаты Z .

По умолчанию свойству z-index присваивается значение auto или 0 . А на переднем плане располагается тот элемент, который в исходном коде HTML описан ниже, так же как и при равных значениях свойства z-index .

Свойство применяется к позиционированным элементам, то есть к элементам для которых установлено свойство position со значением absolute , fixed или relative .

Вот такой эффект можно получить, используя слои. Собственно, точно такого же эффекта можно достичь и одним из множества фильтров Ехплорера, но второе решение будет отображаться правильно только в самом Ехплорере.
Итак, что же из себя представляет слой?
Код слоя:

id — это индивидуальное имя слоя, совпадать и повторяться оно не должно!
style — это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста — без главных особенностей, присущих слоям — таких, как расположение поверх чего угодно.
left — расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.
top — расстояние от верха.
ну, ширина и высота вам уже известны, их не упоминаю.
z-index — значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
Казалось бы, дизайн, построенный на слоях, намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы, как положительные, так и отрицательные.
В числе положительных:

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

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

Такие вот пирожки-печенюшки..
Так и останутся слои элементом чисто декоративным и никак не основным. Зато при помощи слоев получаются приятные такие менюшки — в примерах скриптов вы сможете найти много таких примочек, пока же мы рассмотрим лишь основные параметры слоев, как таковых.

У слоев есть много других тегов, но, как правило, они все предназначены для использования наряду со скриптами, поэтому в них мы пока зарываться не будем, а изучим следующую тему: каскадные таблицы стилей, оно же — CSS.

Поверхностные наложения можно применять для того, чтобы задать вопросы, представить свойства, обозначить прогресс, дать инструкции или показать информацию. Их можно активировать напрямую действиями пользователя (например, щелкнув на действие, проведя мышью над объектами) или представить веб-приложениями на различных стадиях при завершении действия. — Дизайн веб-интерфейсов

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

МЕТОД №1: АБСОЛЮТНО ПОЗИЦИОНИРОВАННЫЙ ЭЛЕМЕНТ

Первый способ создания наложения – абсолютное позиционирование на странице элемента HTML. В разметке будет пустой div, а с помощью CSS этот div абсолютно позиционируется и ему назначается болшое значение z-index для того, чтобы гарантировать, что он останется на странице поверх всех прочих элементов, кроме модального окна, открывающегося сверху этого наложения, которое получит еще более высокий z-index, чем оверлей.

Предположим, в нашу разметку уже добавлен пустой div, и ему назначен класс .overlay, а вот CSS для позиционирования этого наложения на странице:

Данный код очень прост, но при использовании этого способа нужно знать еще кое о чем.

Во-первых, убедитесь, что оверлей абсолютно позиционирован по отношению к body. Так что, если наложение, например, содержится в другом div’е и позиционирование этого другого div’а установлено на относительное, то оверлей будет позиционирован абсолютно относительно его контейнера, а не body. Поэтому вам нужно либо дать наложению возможность быть прямым подчиненным узлом body, или убедиться, что ни у одного из его дочерних элементов позиционирование не установлено на relative.

Кроме того, вам следует убедиться, что содержимое страницы растягивается до самого низа окна просмотра или ниже, потому что body увеличивается таким образом, чтобы соответствовать высоте своего содержимого (естественно, предположим, что контент не расположен абсолютно), а если содержимого недостаточно для того, чтобы растянуть высоту body до низа окна просмотра, то наложение, достигающее 100% высоты тела, так же не достигнет низа окна просмотра и, следовательно, не закроет его.

Что бы этого избежать и не беспокоиться о количестве контента на странице, а оверлей при этом закрывал бы все окно просмотра, вы должны установить высоту корневого элемента html и body. Однако помните при установке высоты элементов html и body:

Если вы назначаете элементу html высоту в 100% (100% высоты относительно окна просмотра) и назначаете body так же высоту в 100% (что высчитывается относительно коренного html), то устанавливаете высоту этих обоих элементов на 100% высоты окна просмотра, и следовательно, неважно насколько далеко простирается содержимое body, его высота остается равной высоте окна просмотра, и такой же будет высота наложения. В этом случае при прокрутке страницы вниз наложение станет прокручиваться вверх и вы увидите содержимое под ним без оверлея, как будто он обрезан.

Решение этой проблемы – установка минимальной высоты корневого элемента и body вместо установки значения высоты, что в большинстве ситуаций предпочтительнее. Установив минимальную высоту, вы гарантируете, что он станет достигать низа окна просмотра и будет увеличиваться по мере увеличения содержимого. И наконец, чтобы величина оверлея увеличивалась и растягивалась для покрытия всего контента при прокрутке страницы вы должны установить position:relative; к body для того, чтобы высота наложения растягивалась вместе с увеличением высоты тела.

Еще об этой методике следует заметить, что не следует пользоваться слишком высокими значениями z-index. Многие разработчики любят брать очень большие значения, вроде z-index: 999999; при позиционировании оверлея или любого другого элемента поверх других элементов страницы. Это не требуется. Чаще всего значения z-index равного 10, иногда даже меньше, достаточно для того, чтобы элемент на странице оставался поверх остальных. Вам лишь следует знать, что если другие элементы получают z-index, и таковые имеются, то просто установите z-index наложения больше самого высокого у прочих элементов.

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

Преимущество этого способа в том, что он поддерживается во всех основных браузерах и даже старых, вплоть до IE8.

Я поместила пример на Codepen, чтобы вы могли протестировать результат этой техники. Попробуйтезаменить min-height в html и body на height, или удалить позиционирование relative из body и посмотреть, как при прокрутке оверлей обрезается внизу.

МЕТОД №2: ЭЛЕМЕНТ С POSITION FIXED

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

3 / 5

В данной статье речь пойдет о том, как поместить слой или элемент в HTML на передний/задний план при помощи CSS . А точнее при помощи свойства z-index .

Скорее всего, каждый из вас в детстве делал Аппликации . Это процесс, когда на лист бумаги поверх вы приклеиваете различные элементы - дома, деревья, облака и так далее. Получается что-то вроде подобия 3-d изображения, где каждый элемент, далее просто слой, наклеен поверх другого. Все они наклеены на лист бумаги.

HTML с помощью CSS позволяет получить аналогичную картинку, только на веб-страничке. Каждый из элементов можно наклеить поверх других при необходимости.

Когда такое может понадобиться? Если вы любитель поиграться с position и положением относительно экрана, может так получится, что один элемент у вас будет перекрывать другой, но вам нужно вытащить закрытый элемент на передний план. Еще часто без определения элементов на задний/передние планы сложно реализовать ту или иную штуку из дизайна, который задумывал не программист, а дизайнер. В общем, область применения у этого свойства очень широкая и ограничивается только вашей фантазией.

Для начала стоит запомнить, что z-index не работает, если у элемента не задано свойство position с значениями absolute , relative или fixed . Это имеет место, так как накладываться, а следственно и размещать их на различных уровнях слоев нужно будет, только если вы начнете наезжать одним элементом на другой за счет position и bottom , top , left , right . Но не только в этом случае может понадобиться расставление z-index . Наезжать элементами друг на друга можно за счет отрицательных значений margin и другими способами.

Если вы не указываете z-index , то для всех элементов по-умолчанию он равен 0 . z-index может принимать как положительные так отрицательные целые значения. В случае значения по-умолчанию элементы будут накладываться друг на друга по тому, чем дальше прописан элемент в коде тем он будет на более переднем плане(в Демо пример №1).

Вот как может выглядеть код CSS -стилей для 3

Важно понимать, что браузер будет сравнивать z-index только у элементо расположенных на одном уровне вложенности и, даже если у внутреннего элемента z-index больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в Демо пример №3).

Вы можете просмотреть эффект в Демо:

Вот подскажите мне на резал кучу картинок, загнал в размер.ю сделал по ним переходы - тоесть использую, как ссылки, в CSS задал z-index для ссылок и для псевдокласса, все вроде работает, только вот что -две ссылки мне надо оставить отдельно, тоесть чтобы не срабатывал z-index, как мне это сделать?

вот пример из html:a <
position: absolute;
z-index: auto;
top: 100px;
>
a:hover <
position: absolute;
z-index:1;
top: 84px;
>

Читайте также: