Как сделать слои в css
Фиксированный дизайн. Наложение слоев
Основная особенность слоев и их основное отличие в использовании от других способов верстки — точное позиционирование и способность накладываться друг на друга. Благодаря этой особенности с помощью слоев можно создавать разные эффекты на веб-странице.
Существует несколько способов создания наложения. Самый простой из них, но при этом и менее гибкий — использование абсолютного позиционирования.
Абсолютное позиционирование
Абсолютное позиционирование позволяет накладывать слои в любом порядке друг на друга. Но при этом требуется знать точные координаты каждого слоя относительно одного из углов окна браузера, что не всегда возможно. Поэтому данный подход имеет ограниченную область применения, например для создания верхнего меню, когда его положение не меняется и точно зафиксировано.
Пример 1. Абсолютное позиционирование
В данном примере положение слоя с именем leftcol устанавливается в левом верхнем углу окна браузера, а слой rightcol смещен на 350 пикселов вправо от левого края окна и на 50 пикселов вниз. Заметьте, что значения left и top следует указывать обязательно для всех слоев, чтобы получилось нужное наложение с заданными координатами.
Более интересный подход к созданию наложения — использование относительного позиционирования. В этом случае слои можно размещать по центру окна браузера или располагать их в любом месте веб-страницы, не задумываясь уже над значением координат слоев.
Относительное позиционирование
Рис 1. Задание положения верхнего слоя
Пример 2. Относительное позиционирование
Существует и другой способ наложения слоев, который связан с относительным позиционированием и использует все разнообразие средств размещения разных слоев.
Универсальный подход
Рис. 2. Задание положения верхнего слоя
Как видно из примера, для создания наложения слоев требуется задать всего два свойства у нижнего слоя и четыре у верхнего. Остальные стилевые свойства управляют видом самих слоев и их содержимого.
Пример 3. Создание наложения слоев
Результат данного примера с другим текстом приведен ниже (рис. 3).
Наложение и порядок слоёв
На веб-странице расположены три изображения игральных карт (рис. 3.51). Пока они лежат рядом, их порядок значения не имеет, но если применить к ним позиционирование и сместить изображения так, чтобы они накладывались друг на друга, одна карта будет находиться выше другой (рис. 3.52).
Рис. 3.51. Карты рядом друг с другом
Рис. 3.52. Карты одна на другой
Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.
Рис. 3.53. Воображаемые координаты веб-страницы
Пример 3.38. Обычный порядок карт
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.
Пример 3.39. Изменение z-index при наведении на карту
Верстка с помощью слоев
Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем мы будем активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.
Однако необходимость в указанных возможностях, которые бы применялись на сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать достаточно сложный код, который бы учитывал эти различия.
В настоящее время разработчики популярных браузеров стали придерживаться спецификаций HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку снизило время на отладку сайта в разных браузерах. Тем не менее, различия в подходах у браузеров существуют и при их возникновении разработчики придерживаются следующих форм работы.
Хак — это набор приемов, когда определенному браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.
Несмотря на то, что хаки работают, использовать их следует ограниченно или вообще обходиться без них. Дело в том, что хаки снижают универсальность кода и для модификации параметров одного элемента приходится вносить изменения одновременно в разных местах.
Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами ее поддерживают, они прогрессируют именно в этом направлении. А именно, полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.
Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «параграф» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам
Слой — это элемент веб-страницы, созданный с помощью тега
Таким образом, верстка с помощью слоев заключается в конструктивном использовании тегов
Разделение содержимого и оформления
Код HTML должен содержать только теги разметки и теги логического форматирования, а любое оформление выносится за пределы кода в стили. Такой подход позволяет независимо управлять видом элементов страницы и ее содержимым. Благодаря этому над сайтом может работать несколько человек, при этом каждый выполняет свою функцию самостоятельно от других. Дизайнер, верстальщик и программист работают над своими задачами автономно, снижая время на разработку сайта.
Активное применение тега
При использовании слоев существенное значение уделяется универсальному тегу
Таблицы применяются только для представления табличных данных
При верстке слоями, конечно же, используются таблицы, но только в тех случаях, когда они нужны, например, для наглядного отображения чисел и других табличных данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным и, более того, вредным.
Использование стилей не является обязательной характеристикой верстки слоями, и для табличной верстки стили могут применяться достаточно активно. Другое дело, что это становится стандартом де-факто и без стилей теперь никак не обойтись.
Резюме
Слой — это базовый элемент верстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу
Хотя современные браузеры более-менее корректно работают со стилями, иногда между ними возникают разногласия по поводу прочтения одного и того же кода. В подобных случаях веб-страница будет по-своему отображаться в разных браузерах. Чтобы этого не произошло, используют хаки — приемы, направленные на то, чтобы каждый браузер получил свой собственный код или стиль. Однако применение хаков при верстке считается плохим тоном, поэтому следует пользоваться ими лишь в крайних случаях или вообще обходиться без них.
Урок 15: Слои в CSS
В этом уроке, поговорим о таком понятии как слой в CSS. Для тех, кто работал с графическими редакторами, это понятие должно быть знакомо, а для остальных постараюсь объяснить.
Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным. Например слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.
Например, можно сделать из карт знаменитую комбинацию Royal Flash.
Как видите, каждая карта, немного перекрывает другую. Вот как это выглядит в коде:
.desatka_buba <
position: absolute;
left: 200px;
top: 200px;
z-index: 1 ;
>
.valet_buba <
position: absolute;
left: 215px;
top: 215px;
z-index : 2 ;
>
.dama_buba <
position: absolute;
left: 230px;
top: 230px;
z-index: 3 ;
>
.korol_buba <
position: absolute;
left: 245px;
top: 245px;
z-index: 4 ;
>
.tuz_bubna <
position: absolute;
left: 260px;
top: 260px;
z-index: 5 ;
>
В следующем уроке, я закончу учебник, и дам некоторые советы, по дальнейшему обучению.
CSS слои, абсолютное и относительное позиционирование, z-index
Сегодняшний урок, как и вчерашний, поведает Вам о позиционировании в CSS, а также про очень интересное свойство под названием z-index.
С помощью этого свойства можно располагать блоки текста (и не только текста) друг над другом, при этом получая что-то наподобие 3Д эффекта.
Данный урок будет очень полезен новичкам в веб дизайне, так как кроме теоретической информации, мы рассмотрим и практический пример.
Многие новички в CSS полностью не разбираются в разных типах позиционирования. Для этого можете почитать подробный урок про типы позиционирования в CSS (ссылка).
Для наглядности посмотрите на два изображения ниже:
z-index
Работу данного свойства проще всего также объяснить изображением:
Элемент с более высоким значением будет находиться выше.
Теперь давайте более подробно рассмотрим наше демо.
Создание 1-го блока
HTML
С помощью стилей придаем данному блоку относительное позиционирование. Благодаря этому можем размещать дополнительные блоки внутри.
Создание 2-го блока
По аналогии с 1-м блоком создаем блок. Отличается этот блок только идентификатором (id=»layer2″).
HTML
Второму блоку придаем абсолютное позиционирование. Теперь он точно будет внутри первого и никуда не денется. Кроме этого, определяем атрибут z-index (=1). Это значит, что блок №2 будет находиться над первым.
Создание 3-го блока
HTML
В этом блоке z-index = 2.
В демо версии я добавил еще один блок для наглядности.
Вы можете попробовать поменять местами индексы у блоков и посмотреть на результат.
На сегодня все! Спасибо за внимание!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.onextrapixel.com
Перевел: Максим Шкурупий
Урок создан: 2 Сентября 2009
Просмотров: 65305
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.