Fixed background css: background-attachment | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

background-attachment — CSS | MDN

Если указано background-image, CSS свойство background-attachment определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.


background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;


background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

Значение свойства background-attachment задаётся одним из ключевых значений из списка ниже.

Значения

fixed: Фон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с background-clip: text.)
local: Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.
scroll: Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)

Формальный синтаксис

Простой пример

HTML

<p>
  There were doors all round the hall, but they were all locked; and when
  Alice had been all the way down one side and up the other, trying every
  door, she walked sadly down the middle, wondering how she was ever to
  get out again.
</p>

CSS

p {
  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
  background-attachment: fixed;
}

Результат

Поддержка нескольких фоновых изображений

Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <attachment> для каждого фона, разделённых запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.

HTML

<p>
  There were doors all round the hall, but they were all locked; and when
  Alice had been all the way down one side and up the other, trying every
  door, she walked sadly down the middle, wondering how she was ever to
  get out again.

  Suddenly she came upon a little three-legged table, all made of solid
  glass; there was nothing on it except a tiny golden key, and Alice's
  first thought was that it might belong to one of the doors of the hall;
  but, alas! either the locks were too large, or the key was too small,
  but at any rate it would not open any of them. However, on the second
  time round, she came upon a low curtain she had not noticed before, and
  behind it was a little door about fifteen inches high: she tried the
  little golden key in the lock, and to her great delight it fitted!
</p>

CSS

p {
  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}

Результат

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 или ранее)	4.0	3.5	1.0
Multiple backgrounds	1.0	3.6 (1.9.2)	9.0	10.5	1.3
`local`	4.0	Нет	9.0	10.5	5.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1	1.0 (1.9.2)	?	10.0	3.2
Multiple backgrounds	2.1	1.0 (1.9.2)	?	10.0	3.2
`local`	?	Нет	?	?	?

background-attachment | CSS справочник

Поддержка браузерами


12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство background-attachment устанавливает, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.

Допускается указывать несколько значений для ряда фоновых изображений, перечисляя их через запятую. Каждое новое значение применяется к соответствующему фоновому изображению в том порядке, который определён в свойстве background-image.

Значение по умолчанию:	scroll
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	нет
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.backgroundAttachment=»fixed»

Синтаксис

background-attachment: scroll|fixed|local|inherit;

Значения свойства

Значение	Описание
scroll	Фоновое изображение фиксируется по отношению к самому элементу и не прокручивается вместе с его содержимым, т.е. если элемент имеет прокрутку, то изображение остаётся на месте. Если страница имеет прокрутку, то фоновое изображение прокручивается вместе с элементом.
fixed	Фоновое изображение фиксируется по отношению к области просмотра окна браузера, поэтому фон остаётся не подвижным при прокрутке содержимого страницы и/или содержимого элемента. Примечание: фиксированное фоновое изображение располагается относительно верхнего левого угла области просмотра окна браузера, а не элемента.
local	Фоновое изображение фиксируется по отношению к содержимому элемента, т.е. если элемент имеет прокрутку, фоновое изображение прокручивается вместе с содержимым элемента.

Пример


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
    body { height: 1000px; margin: 0; }
    div { width: 300px; height: 200px; margin-bottom: 10px; overflow: auto; }
    #scroll { background: #00ff00 url('cogs.png') no-repeat scroll; }
    #local { background: #00ff00 url('cogs.png') no-repeat local; }
    #fixed { background: #00ff00 url('cogs.png') no-repeat fixed; }
  </style>
</head>
<body>

  <div>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br></div>

  <div>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br></div>

  <div>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br></div>

</body>
</html>

Попробовать »

фиксация фона — учебник CSS

По умолчанию, когда вы скроллите веб-страницу с фоном, фон прокручивается вместе с другими элементами. Иногда это уместно, а иногда хочется, чтобы изображение, заданное через background-image, всегда оставалось на виду. Для управления этим состоянием существует свойство background-attachment.

Значения background-attachment

Свойство может принимать три значения для настройки поведения фона:

scroll (значение по умолчанию) — фоновое изображение перемещается вместе с другими элементами при скролле веб-страницы.
fixed — значение фиксирует фоновое изображение, делая его нечувствительным к скроллу. При прокручивании страницы фон на заднем плане останется неподвижным.
local — данное значение было добавлено из-за того, что в случае с локальным скроллом фон со значением scroll ведет себя как fixed. При значении local фон прокручивается вместе с содержимым элемента, и не прокручивается, если содержимое не скроллится (но прокручивается вместе с самим элементом).

Для лучшего понимания работы свойства взгляните на примеры ниже. Чтобы вы могли их сравнить, ваш браузер должен поддерживать все три значения background-attachment (надеемся, что при изучении CSS вы пользуетесь современным десктопным браузером!).

background-attachment: scroll

background-attachment: fixed

background-attachment: local

Поддержка браузерами

Полная поддержка всех значений свойства background-attachment есть у десктопных браузеров IE9+, Edge 12+, Firefox 25+, Chrome (все версии), Safari 5+, Opera 11.5+. Из мобильных браузеров все значения понимают Opera Mobile, Firefox для Android, IE Mobile и QQ Browser. В других браузерах поддержка либо частичная, либо отсутствует.

Далее в учебнике: свойства background-origin и background-clip для позиционирования фоновых изображений и управления обрезкой.

10 фиксированных фонов CSS

Коллекция отобранных вручную фиксированных фонов HTML и CSS примеров кода.

CSS Анимированные фоны
CSS-фоновые узоры
CSS-фоны частиц
CSS Треугольные фоны
Плагины фона jQuery

О коде

Фиксированное прикрепление фона

Фиксированный фон с прокруткой содержимого.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Магия прокрутки на простом CSS

Если колесо мыши вниз … прокрутите вправо.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Джошуа Митчелл
1 июля 2014 г.

О коде

Ретро слайд-шоу CSS

CSS-слайд-шоу с прикреплением фона : исправлено;

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Дерек Палладино
30 октября 2013 г.

О коде

Книжка-книжка со прокруткой

Использование фоновых изображений и различных разделов, раскрывающих каждое фиксированное фоновое изображение для создания эффекта книжки-книжки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

CSS2 — прикрепление фона к любому элементу

фон-прикрепление к любому элементу

background-attachment требуется три значения, но все браузеры поддерживают только два.

Спецификация

W3C говорит:

‘background-attachment’
Если задано фоновое изображение, это свойство указывает, является ли оно фиксированным относительно области просмотра («фиксированный») или прокручивается вместе с документом («прокрутка»).

фоновое приложение: свиток

Фоновое изображение прокручивается вместе с документом . Поскольку прокрутка div не прокручивается документ, фоновое изображение моего div с переполнением : auto не должно реагировать.

scroll не означает: пусть изображение прокручивается вместе с элементом. Значение местное Является ли это. Тем не менее проводник Windows интерпретирует scroll как таковой.

фоновое прикрепление: фиксированное

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

Лучше всего рассматривать элемент как своего рода «окно», через которое вы просматриваете фоновое изображение. Если это «окно» движется, вы видите другую часть фонового изображения.

Посмотрите мой пример, чтобы понять точка.

фоновое приложение: местное

Это значение CSS3 говорит, что фон должен прокручиваться вместе с элементом.В настоящее время ни один браузер не поддерживает его. я надеюсь, поддержка скоро придет; нам нужно это значение.

Совместимость

местный

Прокручивает с элементом.
Тестовая страница

Алтер родной

№

Алтер родной

Если браузер не поддерживает local , он использует значение по умолчанию свиток .Любопытно, что поскольку scroll означает локальный в IE и Konqueror, эти браузеры случайно оказались единственными, поддерживающими local , хотя по неправильным причинам.

свиток

Фиксированное положение относительно элемента; прокручивается с документом
Тестовая страница

местный

Есть

местный

фиксированная

Фиксированное положение относительно окна; не прокручивается
Текстовая страница

свиток

Есть

№

Есть

Какого хрена фоновая привязанность локальная

16 февраля 2019 г.

Недавно я наткнулся на background-attachment: local из-за этого супер-удивительного трюка в Smashing Magazine, который добавляет градиент по бокам стола … только если таблица переполнена.Это действительно здорово, но хотя я знал о scroll и с фиксированными значениями для background-attachment , я никогда раньше не слышал о local .

Чтобы понять, что делает local , вам нужно знать, что сначала делают scroll и fixed , так что действительно быстрое руководство по ним:

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

Однако есть проблема с scroll , и это означает, что он не работает так, как вы ожидали, если этот изолированный элемент имеет полосу прокрутки. Если это так, на самом деле он ведет себя как фиксированный . Вот пример, чтобы проиллюстрировать, что я имею в виду.

См. Перо background-attachment: scroll — что за фиг ?! Автор: Кевин (@kevinpowell) на CodePen.

Обратите внимание, что при прокрутке страницы фон работает так, как вы ожидали, но если вы прокручиваете внутри самого элемента, он действует как фиксированный фон . Это связано с тем, что фон элемента с background-attachement: scroll прокручивается с его границей . Когда прокручивается вся страница, фон перемещается вместе с ней, но когда вы прокручиваете внутри этого элемента, граница этого элемента не перемещается, следовательно, фон также не перемещается.

местный на помощь

Это то, для чего предназначен local . Он фиксирует фон содержимого вместо границы элемента.Ниже приведен пример работы всех трех. Обратите внимание, что если вы прокручиваете страницу, первый и последний элементы ( scroll и local соответственно) ведут себя одинаково … но затем прокручиваются внутри элемента. Тот, у которого локальный , вероятно, то, что вы искали в первую очередь.

См. Перо background-attachment: местное от Кевина (@kevinpowell) на CodePen.

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

Подписаться Мы не будем рассылать вам спам. Отпишитесь в любой время.

10 фрагментов CSS и JavaScript для создания эффекта прокрутки параллакса

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

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

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

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!

1. Великое падение

The Great Fall, разработанный CJ Gammon, — один из самых уникальных интерфейсов, которые я когда-либо встречал.

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

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

Но по большей части это действительно свидетельство того, что возможно в современной веб-разработке.Изучение элемента холста дает вам полный контроль над вашим дизайном.

2. Параллакс прокрутки CSS

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

При прокрутке каждый раздел страницы появляется «над» фоном. Это создает иллюзию глубины и является одним из ключевых элементов великолепного дизайна с параллаксом.

Разработчик Себастьян Шепис использовал чистый CSS для этой страницы, и это довольно простая концепция.Я думаю, что любой мог бы легко клонировать это, не говоря уже о том, что дизайн фона можно было бы значительно улучшить.

3. Параллакс тега простого изображения

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

В этом фрагменте разработчик Ренан Брено потратил некоторое время на изменение скорости прокрутки, чтобы показать, как она может сильно варьироваться.

Разница здесь не столько в том, насколько быстро вы прокручиваете страницу или насколько велико место размещения изображения. Скорее вы видите, как быстро изображение перемещается через фон страницы во время прокрутки. Это очень тонкий эффект параллакса, но этот макет является отличным шаблоном, чтобы увидеть различные скорости анимации в действии.

4. #Maincode Hackdays

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

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

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

5. CSS Parallax

Это перо с параллаксом, созданное Пауло Кунья, является уникальным примером того, как работают эффекты параллакса.

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

Вы можете использовать тот же эффект с макетом с длинной прокруткой, и он будет иметь похожий стиль дизайна.

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

6. Параллакс дизайн

Вот интересный параллакс-дизайн для образца свадебной страницы, созданный Кэти Роджерс.

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

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

7. Параллакс прокрутки фонового изображения

Ранее я упоминал, как скорость прокрутки может изменяться в зависимости от скорости изменения положения фона.

Что ж, этот пример, разработанный Ричем Хауэллом, является прекрасным сравнением, чтобы увидеть, как это работает в действии.

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

Ни одна из этих скоростей не является неправильным или неточным отображением параллакса. Это просто разные методы создания движения на странице, и это маленькое перо — отличный способ визуализировать множество вариантов.

8. Звездный фон

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

Все анимации проходят через CSS, но это перо использует Sass и Compass, поэтому их будет полезно понять, прежде чем вносить изменения.

Но вы можете просто скопировать / вставить это в свой макет, не внося слишком много изменений. CodePen позволяет компилировать Sass в CSS одним нажатием кнопки, поэтому получить исходный код также не составит труда.

9. Холст Parallax Skyline

Иногда дизайн с параллаксом также нацелен на движение мыши вместе с функциями прокрутки.Этот дизайн холста создает эффект бесконечной линии горизонта, который реагирует на движение мыши по странице.

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

Естественно, это требует JavaScript для анимации, потому что это довольно сложная идея. Но это также не то, что вы найдете на многих веб-сайтах, так что это тоже не то, что вы скопируете на свой сайт. Но как концепция параллакса это действительно интересно.

10. Параллакс наведения

Еще один эффект параллакса, нацеленный на мышь, — это дизайн, созданный Тулио Филипе. Он не занимает всю страницу, поэтому у него совершенно другая концепция параллакса.

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

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

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

11. Фильтр разбитого стекла

Я видел этот эффект на веб-сайтах раньше, и он создает очень своеобразный дизайн. Фильтр с разбитым стеклом создает иллюзию того, что фоновое изображение разделено на множество частей. Это почти похоже на то, как будто изображение было на стекле, и оно разбилось, расколов изображение и искривив изображение.

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

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

Расширенные макеты с абсолютным и фиксированным позиционированием · Документы WebPlatform

Резюме

В этой статье рассматривается абсолютное и фиксированное позиционирование.

Введение

Теперь пора обратить ваше внимание на вторую пару значений свойства position — absolute и fixed .Первая пара значений — статический и относительный — тесно связаны, и мы подробно рассмотрели их в предыдущей статье.

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

Фиксированное позиционирование — это просто специализированная форма абсолютного позиционирования; элементы с фиксированным позиционированием фиксируются относительно окна просмотра / браузера, а не содержащего элемента; даже если страница прокручивается, они остаются в том же положении внутри окна браузера.

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

Но прежде чем все это, давайте рассмотрим важную предварительную концепцию — содержание блоков.

Содержащие блоки

Важным понятием, когда дело доходит до абсолютного позиционирования, является содержащий блок: блок блока, относительно которого расположены положение и размеры абсолютно позиционированного блока.Для статических блоков и блоков, расположенных относительно друг друга, содержащий блок является ближайшим предком на уровне блока, другими словами, родительским элементом. Однако для абсолютно позиционированных элементов все немного сложнее. В этом случае содержащий блок — это ближайший -позиционный предок . Под «позиционированным» мы подразумеваем элемент, для которого свойство position установлено на относительно , absolute или fixed — другими словами, все, кроме обычных статических элементов.

Итак, установив position: relative для элемента, вы сделаете его содержащим блоком для любого абсолютно позиционированного потомка (дочерних элементов), независимо от того, появляются ли они сразу под относительно позиционированным элементом в иерархии или ниже по иерархии.

Если абсолютно позиционированный элемент не имеет позиционированного предка, то содержащий блок — это то, что называется «начальным содержащим блоком», что на практике приравнивается к элементу html .Если вы смотрите на веб-страницу на экране, это означает окно браузера; если вы печатаете страницу, это означает границу страницы.

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

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

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

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

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

Указание позиции

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

Для относительно позиционированного элемента четыре свойства определяют относительное расстояние для смещения созданного блока.Помните, что в случае относительного позиционирования они дополняют друг друга, так что top: 1em и bottom: -1em означают одно и то же, и не имеет смысла указывать одновременно top и bottom (или left и справа ) для того же элемента, потому что одно из значений будет проигнорировано.

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

Microsoft Internet Explorer версии 6 и старше не поддерживает метод указания всех четырех краев, но они поддерживают метод указания одного угла плюс размеры.

  / * Этот метод работает в IE6 * /
#foo {
  позиция: абсолютная;
  верх: 3em;
  слева: 0;
  ширина: 30em;
  высота: 20em;
}

/ * Этот метод не работает в IE6 * /
#foo {
  позиция: абсолютная;
  верх: 3em;
  справа: 0;
  внизу: 3em;
  слева: 0;
}

Здесь следует помнить, что значения, которые вы устанавливаете для свойств top , right , bottom и left , определяют расстояния от краев элемента до их , соответствующих , содержащих края блока.Это не похоже на систему координат, где каждое значение относится к одной исходной точке. Например, right: 2em означает, что правый край абсолютно позиционированного блока будет на 2em от правого края содержащего блока.

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

Давайте попробуем пример, чтобы увидеть, как это работает.

Скопируйте приведенный ниже код в текстовый редактор и сохраните документ как absolute.html.

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

Затем скопируйте следующий код в новый файл и сохраните его как absolute.css.

  html, body {
   маржа: 0;
   отступ: 0;
 }

 #outer {
   маржа: 5em;
   граница: 1px solid # f00;
 }

 #внутренний {
   ширина: 6em;
   высота: 4em;
   цвет фона: # 999;
 }

Сохраните оба файла и загрузите HTML-документ в браузер.Вы увидите серый прямоугольник, окруженный несколько более широкой красной рамкой.
Элемент #inner имеет заданную ширину и высоту, а также серый цвет фона. Элемент #outer , который является структурным родительским элементом #inner , имеет красную границу. Он также имеет поле 5em по периметру, чтобы сместить его от краев окна браузера и позволить нам более четко видеть, что происходит. Пока ничего удивительного, правда? Высота элемента #outer задается его дочерним элементом ( #inner ), а ширина — горизонтальными полями.
Теперь посмотрите, что произойдет, если вы сделаете #inner абсолютно позиционированным! Добавьте следующее выделенное объявление к правилу #inner :
```
  #inner {
   ширина: 6em;
   высота: 4em;
   цвет фона: # 999;
   позиция: абсолютная;
 }
  
```
Сохранить и перезагрузить. Вместо красной границы вокруг серого прямоугольника теперь есть только более толстая верхняя граница. А серая коробка вообще не двигалась! Вы этого ожидали?

Здесь происходят две интересные вещи.

Прежде всего, если сделать #inner абсолютно позиционированным, это полностью удалило его из документооборота. Это означает, что его родительский элемент #outer теперь не имеет дочерних элементов, находящихся в нормальном потоке, поэтому его высота уменьшается до нуля. То, что выглядит как красная линия толщиной 2 пикселя, на самом деле является границей в 1 пиксель вокруг элемента с нулевой высотой — вы видите верхнюю и нижнюю границы, между которыми ничего нет.

Вторая интересная вещь — абсолютно позиционированная коробка не двигалась.Значение по умолчанию для свойств верхний , правый , нижний и левый : авто , что означает, что абсолютно позиционированный прямоугольник появится именно там, где он был бы, если бы он не был размещен. Однако, поскольку он удален из потока, он будет перекрывать любые элементы в нормальном потоке, следующие за ним. На самом деле это очень полезно — вы можете положиться на это, если хотите переместить сгенерированный блок только в одном измерении. Например, в раскрывающемся меню, управляемом CSS, «раскрывающиеся» панели могут быть абсолютно позиционированы с указанием только свойства top .Затем они появятся в ожидаемых координатах по оси X (так же, как их родительские), автоматически.

Затем давайте установим высоту для элемента #outer , чтобы он снова выглядел как прямоугольник, и переместим #inner в сторону. Добавьте следующие выделенные строки в свои правила CSS:
```
  #outer {
   маржа: 5em;
   граница: 1px solid # f00;
   высота: 4em;
 }

 #внутренний {
   ширина: 6em;
   высота: 4em;
   цвет фона: # 999;
   позиция: абсолютная;
   слева: 1em;
 }
  
```
Сохраните и перезагрузите, и вы увидите некоторые изменения.Элемент #outer теперь снова является прямоугольником, поскольку вы задали для него высоту. Элемент #inner сместился в сторону, но не туда, где вы могли ожидать. Это не 1em от левого края своего родителя, а 1em от левого края окна! Причина в том, что, как объяснялось выше, #inner не имеет позиционированного предка, поэтому его содержащий блок является начальным содержащим блоком. Если вы укажете позицию, отличную от auto , она будет относиться к соответствующему краю содержащего блока.Когда вы устанавливаете left: 1em , левый край #inner заканчивается на 1em от левого края окна.
1. Сохранить и перезагрузить — о чудо! Серый прямоугольник теперь находится на расстоянии 1em от левой границы родительского элемента. Установка position: relative в правиле #outer сделало его позиционированным и установило его как содержащий блок для любых абсолютно позиционированных потомков, которые он мог иметь. Значение left: 1em , которое вы установили для #inner , теперь отсчитывается от левого края #outer , а не от левого края окна браузера.

Указание размеров

Абсолютно позиционированные элементы будут сжаты, чтобы соответствовать их содержимому, если вы не укажете их размеры. Вы можете указать ширину, задав свойства left и right или задав свойство width . Вы можете указать высоту, задав свойства top и bottom или задав свойство height .

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

Для абсолютно позиционированного элемента процентные значения для свойств left , right и width относятся к ширине содержащего блока. Значения в процентах для свойств top , bottom и height относятся к высоте содержащего блока.

Internet Explorer 6 и старше, а также Opera 8 и старше ошиблись и использовали вместо этого размеры родительского блока .Давайте поэкспериментируем с другим примером, чтобы увидеть, как это может иметь большое значение.

Начните с указания размеров #inner с использованием процентных значений — внесите следующие изменения в правило #inner :
```
  #inner {
   ширина: 50%; высота: 50%;
   цвет фона: # 999;
   позиция: абсолютная;
   слева: 1em;
 }
  
```
Сохраните и перезагрузите, и вы увидите, что серый прямоугольник становится шире и короче (по крайней мере, если вы используете современный браузер).Содержащий блок по-прежнему имеет номер #outer , поскольку он имеет позицию : относительно . Ширина элемента # inner теперь вдвое меньше, чем #outer , а его высота составляет половину высоты #outer .
Давайте снова сделаем область просмотра содержащим блоком, чтобы увидеть разницу! Внесите следующие изменения в #outer :
```
  #outer {
   маржа: 5em;
   граница: 1px solid # f00;
   высота: 4em;
   положение: статическое;
 }
  
```
Сохранить и перезагрузить — большая разница, а? Серое поле теперь вдвое меньше ширины и вдвое меньше окна браузера.Как видите, знание содержащихся блоков абсолютно необходимо!

Третье измерение — z-index

Естественно рассматривать веб-страницу как двумерную. Технологии еще недостаточно развиты, чтобы 3D-дисплеи стали обычным явлением, поэтому нам приходится довольствоваться шириной и высотой и поддельными 3D-эффектами. Но на самом деле рендеринг CSS происходит в трех измерениях! Это не значит, что вы можете заставить элемент зависать перед монитором — но вы можете делать некоторые другие полезные вещи с позиционированными элементами.

Две основные оси на веб-странице — это горизонтальная ось X и вертикальная ось Y. Начало этой системы координат находится в верхнем левом углу области просмотра, то есть там, где значения X и Y равны 0. Но есть также ось Z, которую мы можем представить как идущую перпендикулярно поверхности монитора. (или на бумагу при печати). Более высокие значения Z указывают на положение «перед» более низкими значениями Z. Значения Z также могут быть отрицательными, что указывает на положение «позади» некоторой точки отсчета (я объясню эту точку отсчета через минуту).

Прежде чем мы продолжим, предупреждаем, что это одна из самых сложных тем в CSS, поэтому не расстраивайтесь, если вы не поймете ее при первом чтении.

Позиционированные элементы (включая относительно позиционированные элементы) визуализируются в рамках так называемого контекста наложения. Элементы в контексте наложения имеют одну и ту же точку отсчета по оси Z. Подробнее об этом я расскажу ниже. Вы можете изменить положение Z (также называемое уровнем стека) позиционированного элемента, используя свойство z-index .Значение может быть целым числом (которое может быть отрицательным) или одним из ключевых слов auto или inherit . Значение по умолчанию — auto , что означает, что элемент имеет тот же уровень стека, что и его родительский элемент.

Следует отметить, что вы можете указать только позицию индекса вдоль оси Z. Вы не можете заставить один элемент отображаться на 19 пикселей позади или на 5 сантиметров впереди другого. Думайте об этом как о колоде карт: вы можете складывать карты и решать, что пиковый туз должен быть поверх трех бубен — у каждой карты есть свой уровень стека или Z-индекс.

Если вы указываете z-index как положительное целое число, вы назначаете ему уровень стека «перед» другими элементами в том же контексте стекирования, которые имеют более низкий уровень стека. 0 (ноль) z-index означает то же самое, что и auto , но есть разница, к которой я вернусь через минуту. Отрицательное целочисленное значение для z-index назначает уровень стека «позади» родительского уровня стека.

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

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

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

Выделенные записи — это элементы, уровень стека которых мы можем изменить с помощью свойства z-index .

Все это довольно сложно представить, поэтому давайте проведем несколько практических экспериментов, чтобы проиллюстрировать Z-индекс.

Начните с добавления следующей выделенной строки в ваш небольшой образец документа:
```
  <тело>
   
      
      
   
 
 
```
Затем я предложу вам восстановить ваш CSS так, чтобы #outer был содержащим блоком, и установить непроцентные размеры #inner .Давайте сделаем #outer немного выше, чтобы у вас было больше места для экспериментов. Внесите следующие выделенные изменения в два правила:
```
  #outer {
   маржа: 5em;
   граница: 1px solid # f00;
   высота: 8em; положение: относительное;
 }

 #внутренний {
   ширина: 5em; высота: 5em;
   цвет фона: # 999;
   позиция: абсолютная;
   слева: 1em;
 }
  
```

Добавьте также правило для элемента #second :

  #second {
   ширина: 5em;
   высота: 5em;
   цвет фона: # 00f;
   позиция: абсолютная;
   верх: 1em;
   слева: 2em;
 }

Сохраните и перезагрузите, и вы увидите ярко-синюю рамку, перекрывающую серую.Оба поля имеют одинаковый уровень стека ( auto , начальное значение, что означает уровень стека 0), но синий прямоугольник отображается перед серым прямоугольником, потому что он появляется позже в исходном коде. Вы можете сделать так, чтобы серый прямоугольник появлялся впереди, задав ему положительный уровень стека. Вам нужно только установить его больше 0 — не нужно переусердствовать и использовать значение вроде 10000. Добавьте следующую выделенную строку в правило #inner :
```
  #inner {
   ширина: 5em;
   высота: 5em;
   цвет фона: # 999;
   позиция: абсолютная;
   слева: 1em;
   z-индекс: 1;
 }
  
```
Сохраните и перезагрузите, и теперь вы увидите серое поле перед синим.

Локальные контексты стека

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

Каждый элемент, для которого z-index указан как целое число, устанавливает новый, «локальный» контекст стека, в котором сам элемент имеет уровень стека 0.Это разница, о которой я упоминал ранее, между z-index: auto и z-index: 0 . Первое не устанавливает новый контекст стекирования, а второе — устанавливает.

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

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

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

Каждый раз, когда вы присваиваете целочисленное значение свойству z-index для элемента, вы создаете «конверт», который содержит этот элемент и его потомков.

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

Начните с добавления содержимого к вашим двум внутренним элементам — добавьте выделенные строки в свой HTML-документ:
```
  
   
 
 
   
 
  
```
Добавьте правило CSS, которое будет применяться к обоим этим элементам span :
```
  пролет {
   позиция: абсолютная;
   верх: 2em;
   слева: 2em;
   ширина: 3em;
   высота: 3em;
 }
  
```
Это делает элементы span абсолютно позиционированными и устанавливает их положение и размеры.Подождите секунду — span элементов встроены — как вы можете указать размеры для встроенных элементов? Ответ заключается в том, что абсолютно позиционированные элементы, такие как плавающие элементы, автоматически создают блоки блоков. Указанные вами позиции будут применяться относительно каждого блока, содержащего span ’. Поскольку оба элемента span имеют абсолютно позиционированный блок div как родительский, эти родительские элементы берут на себя роль содержащихся блоков.
Давайте теперь добавим цвет к элементам span , чтобы вы могли видеть, где они появляются.Добавьте в таблицу стилей следующие правила:
```
  # inner span {
   цвет фона: # ff0;
 }

 #second span {
   цвет фона: # 0ff;
 }
  
```
Сохраните и перезагрузите, и вы должны увидеть желтый квадрат в нижнем правом углу большего серого квадрата и голубой квадрат в нижнем правом углу большего синего квадрата. Серый и желтый квадраты появляются перед синим и голубым квадратами, так как серый квадрат имеет z-index : 1 .
Что делать, если вы хотите, чтобы голубой квадрат был впереди всех остальных квадратов? Все, что вам нужно сделать, это установить более высокий уровень стека, чем серый квадрат. На самом деле, достаточно присвоить ему тот же уровень стека , что и серый квадрат, поскольку голубой квадрат появляется позже в разметке. Давайте попробуем — внесите следующие изменения в свой CSS:
```
  #second span {
   цвет фона: # 0ff;
   z-индекс: 1;
 }
  
```
Сохранить и перезагрузить. Если ваш браузер правильно поддерживает рекомендацию CSS, голубой квадрат теперь должен быть впереди.Серый квадрат имеет z-index : 1 , что означает, что он устанавливает локальный контекст стекирования. Другими словами, вы создали один из этих «конвертов» и поместили внутрь серый квадрат и его желтый дочерний квадрат.

Еще не запутались? Следующий эксперимент должен прояснить ситуацию.

Установите высокий уровень стека для желтого квадрата, чтобы вывести его на передний план — внесите следующие изменения в свой CSS:
```
  # inner span {
   цвет фона: # ff0;
   z-индекс: 4;
}
  
```
Если вы сохраните и перезагрузите, вы увидите… никаких изменений! Уровень стека, который мы указали для желтого квадрата, применяется в локальном контексте стека, установленном серым квадратом — желтый квадрат находится внутри конверта вместе со своим серым родительским элементом.Вы можете переместить голубой квадрат на передний план, потому что его родительский элемент (синий квадрат) не устанавливает локального контекста стекирования — он имеет подразумеваемый z-index : auto . Синий квадрат — это незакрепленная бумага в стопке. Желтые и голубые квадраты фактически находятся в маленьких конвертах сами по себе (они имеют целочисленный уровень стека и сами устанавливают локальные контексты стека).
Если вы заставите синий квадрат установить локальный контекст наложения, вы не сможете переместить голубой квадрат на передний план, если вы также не перенесете его родительский элемент (синий квадрат) на передний план.Давайте попробуем — внесите следующие изменения в свой CSS:
```
  #inner {

   ...

   z-индекс: 2;
 }

 #второй {

   ...

   z-индекс: 1;
 }

 #second span {

   ...

   z-индекс: 3;
 }
  
```
Сохранить и перезагрузить. Теперь серый и синий квадраты устанавливают локальные контексты наложения, что дает нам два конверта. Внизу стопки находится конверт с уровнем стопки 1, содержащий два внутренних конверта (синий квадрат и голубой квадрат). Вверху стопки находится конверт с уровнем стопки 2, содержащий два внутренних конверта (серый квадрат и желтый квадрат).В первом конверте синий квадрат имеет локальный уровень стека 0, поэтому он появляется за голубым квадратом, который имеет локальный уровень стека 3. Во втором конверте серый квадрат имеет локальный уровень стека 0, поэтому он появляется за желтым квадратом с локальным уровнем стека. уровень стека 4. На рисунке 1 показаны четыре бокса и два локальных контекста стека сбоку вдоль оси Z.

Рисунок 1: Иллюстрация различных контекстов наложения.

Элементы, расположенные внутри «2», всегда будут появляться перед всеми элементами внутри «1».Затем в каждом контексте наложения элементы с более высоким номером z-индекса появляются перед элементами с небольшим номером z-индекса. Если два элемента имеют одинаковый номер z-index, то тот, который появляется позже в разметке, появится впереди.

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

Хорошая новость в том, что вы, скорее всего, никогда не столкнетесь с этими проблемами. Изменения в z-index не очень распространены в хороших макетах, и если они вообще происходят, то обычно в пределах одного контекста стекирования.

Фиксированное позиционирование

Элемент с положением : фиксированный фиксируется относительно области просмотра. Он остается на месте, даже если документ прокручивается.Для media = "print" фиксированный элемент будет повторяться на каждой печатной странице.

Обратите внимание, что Internet Explorer версии 6 и старше вообще не поддерживает фиксированное позиционирование. Если вы используете один из этих браузеров, вы не сможете увидеть результаты примеров в этом разделе.

В то время как позиция и размеры элемента с position: absolute относятся к его содержащему блоку, позиция и размеры элемента с position: fixed всегда относительно исходного содержащего блока.Обычно это окно просмотра: окно браузера или окно страницы. Чтобы продемонстрировать это, в приведенном ниже примере вы исправите один из ваших элементов. Вы сделаете второй очень высоким, чтобы создать полосу прокрутки, чтобы было легче увидеть эффект, который он оказывает.

Внесите следующие изменения в свой код CSS:

  #inner {
   ширина: 5em;
   высота: 5em;
   цвет фона: # 999;
   положение: фиксированное; верх: 1em;
   слева: 1em;
 }

 #второй {
   ширина: 5em;
   высота: 150мм;
   цвет фона: # 00f;
   позиция: абсолютная;
   верх: 1em;
   слева: 2em;
 }

Сохранить и перезагрузить.Если у вас нет вертикальной полосы прокрутки, увеличьте значение height для #second . (А какой у вас гигантский монитор?) Высокий синий элемент выступает за нижнюю часть окна. Прокрутите страницу вниз и обратите внимание на серый квадрат в верхнем левом углу. #inner теперь фиксируется в позиции 1em сверху окна и 1em слева; поэтому при прокрутке серая рамка остается на том же месте на экране.

Заключение

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

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

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

См. Также

Вопросы для упражнений

Отмените изменения из примера фиксированного позиционирования, а затем измените порядок наложения между четырьмя абсолютно позиционированными квадратами так, чтобы серый квадрат был сзади, а затем синий, желтый и голубой квадраты в указанном порядке.
No related posts.