Блок в css

Слои

CSS дает возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Синтаксис для работы со слоями разработан и одобрен в конце 1996 года в рабочем проекте консорциума «CSS Positioning (CSS-P)» Данный проект для позиционирования элементов практически одинаково поддерживается браузерами Internet Explorer 4.0 и Netscape 4.0 за исключением ряда мелких отличий. Однако объектные модели браузеров для динамического управления слоями с помощью JavaScript отличаются. В этом и кроется основная проблема для веб-разработчиков, которые используют слои в своих программах.

Основы

Код HTML для примера показан ниже.

Пример 1. Создание слоев

Для создания слоев следует использовать тег DIV или SPAN . Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент DIV . При размещении текста внутри параграфа применяется тег SPAN .

Тип позиционирования определяется параметром position , положение элемента двумя координатами top и left , а порядок слоя значением z-index .

Позиционирование слоя

Свойство position может принимать одно из трех значений: static (статическое), absolute (абсолютное) и relative (относительное). Параметр static по умолчанию не оказывает никакого влияния на расположение слоев.

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

Читайте также:  Примеры байт кода java

Кроме тегов DIV и SPAN абсолютное позиционирование поддерживают следующие элементы:
APPLET, INPUT, BUTTON, OBJECT, SELECT, FIELDSET, IFRAME, TABLE, IMG, TEXTAREA.

Параметр position: relative используется для смещения слоя относительно родительского элемента. Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left , то слой смещается от своего нормального положения в документе.

Положение слоя

В то время как свойство position указывает тип системы координат, параметры top и left определяют точную позицию слоя. Значения этих параметров могут определяться в процентном отношении или пикселах, принимать положительные и отрицательные величины. Это дает возможность размещать контент выше или ниже на странице независимо от физической позиции кода HTML. То есть, в верхней части страницы можно поместить слой, который описан внизу HTML-документа.

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

Свойство z-index

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

Рис. 1. Расположение слоев

В примере, приведенном в начале, показано использование параметра z-index для изменения положения слоев относительно друг друга.

Свойство visibility

Для отображения или скрытия слоя используется параметр visibility . Он может принимать значения visible , установленное по умолчанию, для показа слоя, и hidden , которое его прячет.

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

Источник

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

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

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

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

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

Слои в CSS

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

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

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

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

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

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

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

      

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

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

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

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

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

Источник

CSS слои, абсолютное и относительное позиционирование, z-index

Сегодняшний урок, как и вчерашний, поведает Вам о позиционировании в CSS, а также про очень интересное свойство под названием z-index.

С помощью этого свойства можно располагать блоки текста (и не только текста) друг над другом, при этом получая что-то наподобие 3Д эффекта.

demosourse

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

Многие новички в CSS полностью не разбираются в разных типах позиционирования. Для этого можете почитать подробный урок про типы позиционирования в CSS (ссылка).

Для наглядности посмотрите на два изображения ниже:

Как Вы видите, при относительном позиционировании, блок с текстом размещается по отношению к абзацу с текстом. При абсолютном — по отношению к окну браузера.

Работу данного свойства проще всего также объяснить изображением:

Элемент с более высоким значением будет находиться выше.

Теперь давайте более подробно рассмотрим наше демо.

Создание 1-го блока


Layer 1


Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.


#layer1 background:#707070;
color:#fff;
position:relative;
width:800px;
height:450px;
>

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

Создание 2-го блока

По аналогии с 1-м блоком создаем блок. Отличается этот блок только идентификатором (id=»layer2″).


Layer 2


Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.


#layer2 background:#f9ad81;
color:#fff;
position:absolute;
top:40px;
left:50px;
width:400px;
height:400px;
z-index:1;
>

Второму блоку придаем абсолютное позиционирование. Теперь он точно будет внутри первого и никуда не денется. Кроме этого, определяем атрибут z-index (=1). Это значит, что блок №2 будет находиться над первым.

Создание 3-го блока


Layer 3


Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.


#layer3 background:#6dcff6;
color:#fff;
position:absolute;
top:80px;
left:100px;
width:600px;
height:200px;
z-index:2;
>

В демо версии я добавил еще один блок для наглядности.

Вы можете попробовать поменять местами индексы у блоков и посмотреть на результат.

Запомните, что элемент с меньшим z-index всегда будет находиться под элементом с высшим. То есть, Вы можете придать блоку №1 индекс = 999, а блоку №2 — 1000. Результат будет такой же.

На сегодня все! Спасибо за внимание!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.onextrapixel.com
Перевел: Максим Шкурупий
Урок создан: 2 Сентября 2009
Просмотров: 69422
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

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

Источник

Оцените статью