Содержание

Наложение и порядок слоёв | htmlbook.ru

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

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Пример 3.38. Обычный порядок карт

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Порядок карт</title>
  <style type="text/css">
   .card IMG { position: relative; }
   .seven { left: -120px; top: 25px; }
   .ace { left: -240px; top: 50px; }
  </style>
 </head>
 <body>
  <p>
   <img src="images/3.png" alt="3" />
   <img src="images/7.png" alt="7" />
   <img src="images/ace.png" alt="Туз" />
  </p>
 </body>
</html>

В CSS за положением по Z-оси отвечает свойство z-index, которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index: 1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.

.card IMG { position: relative; }
.three { top: 50px; left: 55px; z-index: 5; }
.seven { left: -120px; top: 25px; z-index: 2; }
.ace { left: -295px; z-index: 1; }

Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.

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

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index, например 9999. Это гарантирует, что даже если в стилях и применяется z-index, он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover.

Пример 3.39. Изменение z-index при наведении на карту

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Порядок карт</title>
  <style type="text/css">
   .card IMG { position: relative; }
   .three { top: 50px; left: 55px; z-index: 5; }
   .seven { left: -120px; top: 25px; z-index: 2;}
   .ace { left: -295px; z-index: 1; }
   .card IMG:hover { z-index: 10; }</style>
 </head>
 <body>
  <p>
   <img src="images/3.png" alt="3" />
   <img src="images/7.png" alt="7" />
   <img src="images/ace.png" alt="Туз" />
  </p>
 </body>
</html>

Как сделать один блок поверх другого css

Свойство CSS z-index. Проблема один элемент перекрывает другой.

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

Вот пример такой ситуации.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

«Блок 2» перекрывает «Блок 3», т.к. он находится выше по коду.

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

Для решения этой проблемы в css используется специальное свойство, которое называется z-index.

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

Это свойство работает только для тех элементов, которые имеют свойство CSS position в значении relative, absolute или fixed.

Давайте попробуем для примера выше поменять порядок отображения блочных элементов.

Разместим «Блок 3» поверх «Блока 2».

Для этого обоим блокам присвоим свойство position:relative, для того, чтобы свойство z-index начало работать.

Как расположить один блок поверх другого?

Имеется 2 блока. В одном — фон, составленный из обрезков. В другом — собственно контент.

Задача: расположить второй блок (div с контентом) поверх первого так, чтобы фон покрывал весь контент.

Фон (в 1 блоке) сделан в виде таблицы 3×3, в которой боковые стороны тянутся, а углы — фиксированного размера. Это для того, чтоб фон был резиновым не только по горизонтали, но и по вертикали. Поэтому просто вложить слой с контентом внутрь слоя с фоном не получится.

Если абсолютно позиционировать фон — то он отрисовывается поверх контента, так что это тоже не подходит.

Как сделать Div отображаться поверх всего остального на экране?

Но когда я перемещаю это всплывающее окно вверх, чтобы появиться над картой, он становится скрытым:

Я пробовал установить z-index на моей странице свойств CSS, но это не сработало.

Есть ли какое-то свойство HTML/CSS, которое можно установить так, чтобы всплывающее окно, которое является DIV, на самом деле всегда накладывается поверх всего остального?

z-index &#8211; не тот простой друг. На самом деле это не имеет значения, если вы положили z-index:999999999999 &#8230;.. Но это имеет значение, КОГДА вы дали ему, что z-index . Различные dom-элементы имеют приоритет друг над другом.

Я сделал одно решение, в котором я использовал jQuery для изменения элементов css и дал ему z-index только тогда, когда мне нужен элемент, который должен быть сверху. Таким образом, мы можем быть уверены, что z-index этого элемента был указан последним, и индекс будет отмечен. Для этого требуется какое-то действие, которое нужно обработать, но в вашем случае это кажется возможным.

Не уверен, что это работает, но вы можете попробовать также указать параметр !important :

Используете ли вы position: relative ?

Попробуйте установить position: relative , а затем z-index, потому что вы хотите, чтобы этот div имел z-индекс по отношению к другому div.

Кстати, ваш браузер важно проверить, работает ли он или нет. Ни IE, ни Firefox не являются хорошими.

Установите индекс DIV z на один больше, чем другие DIV. Вам также необходимо убедиться, что у DIV есть и position кроме static .

вы должны использовать position:fixed , чтобы сделать значения z-index применимыми к вашему div

Попробуйте установить положение в абсолютное, т.е.

Одна из форм для этого &#8211; вставить панель, которую вы хотите развернуть внутри DIV, настроенной как относительная: покажите вам:

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

Я надеюсь, что эта помощь

выпадающие списки всегда отображаются вверху, единственное решение для этой проблемы &#8211; скрывать выпадающие списки при отображении изображения (отображение: блок или видимость: видимый) и показывать их при скрытом изображении (отображение: нет или видимость: скрыто)

Как наложить элементы друг на друга с помощью CSS?

При разработке веб-дизайна часто нужно сделать так, чтобы два элемента перекрывались или полностью накладывались друг на друга. В CSS это можно реализовать с помощью свойства position и Grid.

Способ 1. Использование свойства Position

Свойство position со значением absolute разместит абсолютно позиционированный элемент на странице. В этом случае указывается позиция элемента относительно левого верхнего угла веб-страницы.

.child {
  ...
  position: absolute;
  top: 0;
  left: 0;
}

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

.child {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
}
.parent {
  position: relative;
}

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

<div>
  <h3>Parent</h3>
  <div>
    <h3>Child 1</h3>
  </div>
  <div>
    <h3>Child 2</h3>
  </div>
</div>
.child {
  position: absolute;
  top: 0;
}
.child-1 {
  left: 0;
}
.child-2 {
  left: 150px;
}
.parent {
  position: relative;
}

Способ 2. Использование CSS Grid

Еще одним способом наложения элементов друг на друга является использование CSS Grid. Но эта технология поддерживается не всеми старыми браузерами.

С помощью Grid мы можем разместить элемент внутри контейнера следующим образом:

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}
.child {
  grid-area: 1 / 1 / 2 / 2;
}

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

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}
.child {
  grid-area: 1 / 1 / 2 / 2;
}
.child-2 {
  margin-left: 200px;
}

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

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

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

Пожалуйста, оставляйте свои мнения по текущей теме статьи. За комментарии, лайки, подписки, отклики, дизлайки низкий вам поклон!

Сергей Бензенкоавтор-переводчик статьи «How to Stack Elements in CSS»

Позиционирование содержимого | WebReference

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

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

Позиционирование через float

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

По существу, свойство float берёт элемент, убирает его из обычного потока страницы и позиционирует слева или справа от родительского элемента. Все остальные элементы на странице будут обтекать такой элемент. Например, абзацы будут обтекать изображение, если для элемента <img> установлено свойство float.

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

Свойство float принимает несколько значений, два самых популярных — это left и right, они позволяют элементу располагаться слева или справа от своего родителя.

img {
  float: left;
}

float на практике

Давайте создадим общий макет страницы с шапкой вверху, двумя колонками в центре и подвалом внизу. В идеале эту страницу следует разметить с помощью элементов <header>, <section>, <aside> и <footer>, как описано в уроке 2 «Знакомство с HTML». Внутри элемента <body> HTML может выглядеть так:

<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>

Демонстрация макета без float

Здесь элементы <section> и <aside> являются блочными, поэтому они укладываются один поверх другого по умолчанию. Однако мы хотим, чтобы эти элементы располагались бок о бок. Установив float для <section> как left, а для <aside> как right, мы можем позиционировать их как две колонки, расположенных напротив друг друга. Наш CSS должен выглядеть так:

section {
  float: left;
}
aside {
  float: right;
}

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

Когда мы устанавливаем элемент обтекаемым, то убираем его из обычного потока HTML-документа. Это приводит к тому, что ширина этого элемента по умолчанию становится шириной его содержимого. Иногда, например, когда мы создаём колонки для многократно используемого макета, такое поведение нежелательно. Это можно исправить путём добавления свойства width с фиксированным значением для каждой колонки. Кроме того, чтобы обтекаемые элементы не соприкасались друг с другом, в результате чего содержимое одного элемента располагается рядом с другим, мы можем использовать свойство margin, чтобы установить пространство между элементами.

Ниже мы расширяем предыдущий блок кода, добавив margin и width для каждой колонки, чтобы лучше формировать наш желаемый результат.

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

Демонстрация макета с float

float могут изменить значение display у элемента

Для обтекаемого элемента также важно понимать, что элемент удаляется из обычного потока страницы и что у элемента может измениться значение display, заданное по умолчанию. Свойство float опирается на то, что у элемента значение display задано как block и может изменить значение display у элемента по умолчанию, если он ещё не отображается как блочный элемент.

Например, элемент, у которого display указан как inline, такой как строчный <span>, игнорирует любые свойства height или width. Однако, если для строчного элемента указать float, значение display изменится на block и тогда элемент уже может принимать свойства height или width.

Когда мы применяем float для элемента, то должны следить за тем, как это влияет на значение свойства display.

Для двух колонок вы можете установить float, для одной колонки как left, а для другой как right, но для нескольких колонок нам придётся изменить наш подход. Скажем, к примеру, мы хотели бы получить ряд из трёх колонок между нашими элементами <header> и <footer>. Если мы выбросим наш элемент <aside> и воспользуемся тремя элементами <section>, наш HTML может выглядеть следующим образом:

<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>

Чтобы расположить эти три элемента <section> в строку из трёх колонок, мы должны задать float для всех элементов <section> как left. Мы также должны настроить ширину <section> с учётом дополнительных колонок и расположить их один рядом с другим.

section {
  float: left;
  margin: 0 1.5%;
  width: 30%;
}

Здесь у нас есть три колонки, все с равной шириной и значением margin, а также с float, заданным как left.

Демонстрация трёхколоночного макета с float

Очистка и содержимое float

Свойство float было первоначально разработано, чтобы позволить содержимому обтекать вокруг изображений. Для изображения может быть задано float и всё содержимое вокруг этого изображения, естественно, обтекает вокруг него. Хотя это прекрасно работает для картинок, свойство float на самом деле не было предназначено для использования в макете и с целью позиционирования и, таким образом, оно идёт с несколькими ловушками.

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

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

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

В нашем предыдущем примере с двумя колонками, после того как мы добавили float к элементам <section> и <aside>, но до того как установили свойство width к любому из них, содержимое внутри элемента <footer> располагалось между двумя обтекаемыми элементами выше него, заполняя всё доступное пространство. Следовательно, элемент <footer> находился бы в промежутке между элементами <section> и <aside>, занимая свободное место.

Демонстрация макета без очистки float

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

Очистка float

Очистка float происходит с помощью свойства clear, которое принимает несколько различных значений: наиболее часто используемые значения — left, right и both.

div {
  clear: left;
}

Значение left очищает левые float, в то время как значение right очищает правые float. Значение both, однако, очистит левые и правые float и часто является наиболее идеальным вариантом.

Возвращаясь к нашему предыдущему примеру, если мы используем свойство clear со значением both для элемента <footer>, то можем очистить float. Важно, что clear применяется к элементу, указанному после обтекаемых элементов, а не раньше, чтобы вернуть страницу в её обычный поток.

footer {
  clear: both;
}

Демонстрация макета с очисткой float

Содержимое float

Вместо очистки float, ещё одним вариантом является установка содержимого float. Результат получится почти такой же, однако содержимое float действительно гарантирует, что все наши стили будут отображаться надлежащим образом.

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

.group::before,
.group::after {
  content: "";
  display: table;
}
.group::after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}

Здесь немного что происходит, но, по сути, всё что CSS делает — очищает все обтекаемые элементы внутри элемента с классом group и возвращает документ в обычный поток.

Более конкретно, псевдоэлементы ::before и ::after, как указано в уроке 4, динамически генерируют элементы выше и ниже элемента с классом group. Эти элементы не включают в себя какой-либо контент и отображаются как табличные элементы, подобно элементам блочным. Динамически генерируемый элемент после элемента с классом group очищает float внутри элемента с классом group, так же, как и clear ранее. И, наконец, элемент с классом group также очищает все float, которые могут появиться до него на случай, если существует float со значением left или right. Также сюда включена небольшая хитрость, которая заставляет старые браузеры играть красиво.

Здесь больше кода, чем единственная команда clear: both, но он может оказаться весьма полезным.

Рассматривая наш макет страницы с двумя колонками мы могли бы обернуть <section> и <aside> родительским элементом. Этот родительский элемент будет содержать в себе обтекаемые элементы. Код будет выглядеть следующим образом:

HTML

<header>...</header>
<div>
  <section>...</section>
  <aside>...</aside>
</div>
<footer>...</footer>

CSS

.group::before,
.group::after {
  content: "";
  display: table;
}
.group::after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

Демонстрация макета с содержимым float

Показанная здесь техника известна как «clearfix» и часто встречается на других сайтах с именем класса clearfix или cf. Мы решили использовать имя класса group, потому что он представляет группу элементов и лучше выражает содержимое.

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

На практике

Вернёмся к сайту Styles Conference и опробуем на нём добавление float к некоторому содержимому.

  1. Перво-наперво, перед применением float к любому элементу, давайте обеспечим содержимым эти обтекаемые элементы, добавив clearfix в наш CSS. В файле main.css, чуть ниже наших стилей сетки, добавим clearfix под именем класса group, как и раньше.
    /*
      ========================================
      Clearfix
      ========================================
    */
    .group::before,
    .group::after {
      content: "";
      display: table;
    }
    .group::after {
      clear: both;
    }
    .group {
      clear: both;
      *zoom: 1;
    }
  2. Теперь, когда мы можем использовать float, давайте зададим его для основного <h2> внутри элемента <header> как left и позволим остальному содержимому в заголовке обтекать его справа.

    Чтобы сделать это, добавим класс logo к элементу <h2>. Затем внутри нашего CSS добавим новый раздел стилей для основного заголовка. В этом разделе мы выберем элемент <h2> с классом logo и установим float как left.

    HTML

    <h2>
      <a href="index.html">Styles Conference</a>
    </h2>

    CSS

    /*
      ========================================
      Основной заголовок
      ========================================
    */
    
    .logo {
      float: left;
    }
  3. Пока мы здесь, добавим чуть больше деталей к нашему логотипу. Начнём с размещения элемента <br> или разрыва строки между словами «Styles» и «Conference», чтобы заставить текст нашего логотипа располагаться на двух строках.

    В CSS добавим границу по верху нашего логотипа и небольшой вертикальный padding, чтобы логотип свободно «дышал».

    HTML

    <h2>
      <a href="index.html">Styles <br> Conference</a>
    </h2>

    CSS

    .logo {
      border-top: 4px solid #648880;
      padding: 40px 0 22px 0;
      float: left;
    }
  4. Поскольку мы сделали элемент <h2> обтекаемым, то хотим установить содержимое float. Ближайшим родителем для <h2> является элемент <header>, поэтому мы добавим к нему класс group. Это применит к нему стили clearfix, которые мы установили ранее.

    <header>
      ...
    </header>
  5. Элемент <header> принимает форму, так что давайте взглянем на элемент <footer>. Подобно тому, что мы сделали с <header>, мы установим float для наших авторских прав как left внутри <small> и пусть все остальные элементы обтекают его справа.

    В отличие от элемента <header>, однако, мы не собираемся применять класс непосредственно к обтекаемому элементу. На этот раз мы собираемся добавить класс к родителю обтекаемого элемента и использовать уникальный селектор CSS, чтобы выбрать элемент, а затем задать ему float.

    Начнём с добавления класса primary-footer к элементу <footer>. Поскольку мы знаем, что у нас будут обтекаемые элементы внутри <footer>, то должны добавить класс group, пока мы здесь.

    <footer>
      ...
    </footer>
  6. Теперь, когда класс primary-footer установлен для элемента <footer>, мы можем использовать этот класс, чтобы целенаправленно выбрать элемент <small> с помощью CSS. Мы хотим задать ему float как left. Не забудьте создать новый раздел в нашем файле main.css для стиля основного подвала.

    /*
      ========================================
      Основной подвал
      ========================================
    */
    
    .primary-footer small {
      float: left;
    }

    Для проверки — здесь мы выбираем элемент <small>, который должен находиться внутри элемента со значением primary-footer у атрибута class, такой как наш элемент <footer>, к примеру.

  7. Наконец, добавим небольшой padding сверху и снизу элемента <footer>, это поможет немного отделить его от остальной части страницы. Мы можем сделать это напрямую с помощью класса primary-footer.

    .primary-footer {
      padding-bottom: 44px;
      padding-top: 44px;
    }

С учётом всех этих изменений в элементах <header> и <footer>, мы должны быть уверены, что внесли их на каждой странице, а не только на странице index.html.

Рис. 5.01. С помощью нескольких float, элементы <header> и <footer> на главной странице Styles Conference работают совместно

Позиционирование через inline-block

В дополнение к использованию float, ещё один способ, которым мы можем позиционировать контент — это применение свойства display в сочетании со значением inline-block. Метод с inline-block, как мы ещё обсудим, в первую очередь полезен для компоновки страниц или для размещения элементов в линию рядом друг с другом.

Напомним, что значение inline-block для свойства display отображает элементы в линию и позволяет им принимать все свойства блочной модели, включая height, width, padding, border и margin. Применение inline-block позволяет нам в полной мере воспользоваться блочной моделью, не беспокоясь об очистке каких-либо float.

inline-block на практике

Давайте взглянем на наш трёхколоночный пример с самого начала. Начнём мы, сохраняя наш HTML таким:

<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>

Теперь вместо float для наших трёх элементов <section> мы изменим у них значение display на inline-block, оставляя свойства margin и width те, что были ранее. В результате наш CSS будет выглядеть следующим образом:

section {
  display: inline-block;
  margin: 0 1.5%;
  width: 30%;
}

К сожалению, одного этого кода недостаточно чтобы сделать трюк и последний элемент <section> выталкивается на новую строку. Помните, поскольку строчно-блочные элементы отображаются на одной линии друг за другом, они включают единое пространство между ними. Когда размер каждого отдельного пространства добавляется к ширине и значению горизонтального margin всех элементов в строке, общая ширина становится слишком большой, выталкивая последний элемент <section> на новую строку. Чтобы отобразить все элементы <section> на одной строке, следует удалить пустое пространство между каждым <section>.

Демонстрация элементов inline-block с пробелом

Удаление пространства между строчно-блочными элементами

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

Первое решение — это поместить каждый новый открывающий тег элемента <section> в той же строке, что и закрывающий тег предыдущего элемента <section>. Вместо использования новой строки для каждого элемента мы в итоге начинаем элементы с той же строки. Наш HTML может выглядеть следующим образом:

<header>...</header>
<section>
  ...
  </section><section>
  ...
  </section><section>
  ...
</section>
<footer>...</footer>

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

Демонстрация элементов inline-block без пробелов

Ещё один метод для удаления пространства между строчно-блочными элементами состоит в открытии комментария HTML непосредственно после закрывающего тега элемента. Затем закройте комментарий непосредственно перед открывающим тегом следующего элемента. Это позволяет строчно-блочным элементам начинаться и завершаться на отдельных строках в HTML и «закомментирует» любое потенциальное пространство между элементами. В результате код будет выглядеть следующим образом:

<header>...</header>
<section>
  ...
</section><!--
--><section>
  ...
</section><!--
--><section>
  ...
</section>
<footer>...</footer>

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

Создание многократно используемых макетов

При создании сайта всегда лучше написать модульные стили, которые могут быть повторно задействованы в других местах, а многократно используемые макеты находятся в верхней части списка повторно применяемого кода. Макеты могут быть созданы с помощью float или строчно-блочных элементов, но что работает лучше и почему?

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

Тем не менее, используйте то, что работает лучше для вас. Если с одним подходом вы знакомы лучше чем с другим, тогда задействуйте его.

В настоящее время в работе появились новые спецификации CSS — в частности, свойства flex- и grid-, которые помогут решить, как лучше всего сверстать страницы. Следите за этими методами, когда они начнут всплывать.

На практике

С твёрдым пониманием многократно используемых макетов, пришло время внедрить один на наш сайт Styles Conference.

  1. Для сайта Styles Conference мы создадим трёхколоночный макет используя строчно-блочные элементы. Мы сделаем это так, чтобы получить три колонки одинаковой ширины или две колонки с общей шириной, разделённой между ними как 2/3 для одной и 1/3 для другой.

    Для начала мы создадим классы, определяющие ширину этих колонок. Эти два класса мы назовём col-1-3 для одной трети и col-2-3 для двух третей. В разделе «Сетка» нашего файла main.css перейдём вперед и определим эти классы и соответствующую им ширину.

    .col-1-3 {
      width: 33.33%;
    }
    .col-2-3 {
      width: 66.66%;
    }
  2. Мы хотим чтобы обе колонки отображались как строчно-блочные элементы. Нам также надо убедиться, что вертикальное выравнивание у них задано по верхней части каждой колонки.

    Давайте создадим два новых селектора, которые совместно будут использовать display и vertical-align.

    .col-1-3,
    .col-2-3 {
      display: inline-block;
      vertical-align: top;
    }

    Взгляните на CSS снова. Мы создали два селектора класса col-1-3 и col-2-3 разделённых запятой. Запятая в конце первого селектора означает, что за ней следует другой селектор. После второго селектора идёт открывающая фигурная скобка, которая сообщает что начинается описание стиля. С помощью запятой разделяющей селекторы мы можем привязать один стиль к нескольким селекторам одновременно.

  3. Мы хотим поместить некоторое пространство между колонок, которое поможет разбить содержимое. Это можно сделать, добавив горизонтальный padding к каждой колонке.

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

    Давайте воспользуемся классом grid, чтобы определить нашу сетку, а затем зададим одинаковый горизонтальный padding для классов grid, col-1-3 и col-2-3. С запятыми, снова разделяющих наши селекторы, наш CSS выглядит следующим образом:

    .grid,
    .col-1-3,
    .col-2-3 {
      padding-left: 15px;
      padding-right: 15px;
    }
  4. Когда мы устанавливаем горизонтальный padding, нам нужно быть осторожными. Помните, в прошлом уроке мы создали контейнер с классом container по центру всего нашего контента на странице с шириной 960 пикселей. В данный момент, если бы мы поставили элемент с классом grid внутрь элемента с классом container, то их горизонтальные padding сложились бы вместе и наши колонки не будут отображаться пропорционально ширине остальной части страницы.

    Мы не хотим чтобы это произошло, так что вместо этого мы должны поделиться некоторыми стилями из правил container с набором правил grid. В частности, мы должны поделиться свойством width (чтобы убедиться, что наша страница остаётся фиксированной на 960 пикселей в ширину) и свойством margin (чтобы выровнять по центру страницы элемент с классом grid).

    Мы осуществим это, разбивая набор старых правил container на следующее:

    .container,
    .grid {
      margin: 0 auto;
      width: 960px;
    }
    .container {
      padding-left: 30px;
      padding-right: 30px;
    }

    Теперь любой элемент с классом container или grid будет 960 пикселей в ширину и располагаться по центру страницы. Кроме того, мы сохранили существующий горизонтальный padding для любого элемента с классом container путём перемещения его в новый, отдельный набор правил.

  5. Хорошо, всю тяжёлую необходимую часть по настройке сетки завершили. Теперь пришло время для работы с нашим HTML и просмотра, как эти классы действуют.

    Мы начнём с тизеров на главной странице, в файле index.html, выровняв их по трём колонкам. В настоящее время тизеры обёрнуты элементом <section> с классом container. Мы хотим изменить класс container на grid так, чтобы внутри мы могли начать размещение колонок.

    <section>
      ...
    </section>
  6. Далее мы хотим добавить класс col-1-3 для каждого элемента <section> внутри <section> с классом grid.

    <section>
    
      <section>
      ...
      </section>
      
      <section>
      ...
      </section>
      
      <section>
      ...
      </section>
      
    </section>
  7. И, наконец, поскольку каждая наша колонка является строчно-блочным элементом, нам следует убедиться что мы удалили пустое пространство между ними. Чтобы сделать это мы воспользуемся комментариями и добавим немного документации к каждому разделу, чтобы лучше организовать свой код.

    <section>
      
      <!-- Спикеры -->
      
      <section>
      ...
      </section><!--
      
      Расписание
      
      --><section>
      ...
      </section><!--
      
      Место проведения
      
      --><section>
      ...
      </section>
      
    </section>

    Для проверки — в строке 3 мы оставили комментарий, идентифицирующий раздел «Спикеры», который за ним следует. В конце строки 7 мы открываем комментарий сразу после закрывающего тега </section>. Внутри этого комментария, в строке 9 мы определяем следующий раздел «Расписание». Затем закрываем комментарий в начале строки 11, сразу перед открывающим тегом <section>. Аналогичная структура комментариев появляется в строках с 13 до 17 между двумя элементами <section>, прямо перед разделом «Место проведения». В целом, мы закомментировали любое потенциальное пустое пространство между колонок, одновременно используя те же комментарии для идентификации наших разделов.

Теперь у нас есть повторно используемая трёхколоночная сетка, которая поддерживает разные расстановки, с использованием ширины колонок как 1/3 и 2/3. Наша главная страница теперь содержит три колонки, разделяя все тизеры.

Рис. 5.02. Главная страница Styles Conference теперь включает трёхколоночный макет

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

Уникальное позиционирование элементов

Рано или поздно каждый пожелает точно позиционировать элемент, но float или строчно-блочные элементы не позволяют проделать такой трюк. Обтекаемые элементы, которые удаляют элемент из потока страницы, часто приводят к нежелательным результатам, поскольку окружающие элементы обтекают вокруг элемента с float. Строчно-блочные элементы, если только мы не создаём колонки, могут быть довольно неудобны, когда дело касается правильного положения. Для подобных ситуаций мы можем использовать свойство position в сочетании со свойствами смещения блока.

Свойство position определяет, как элемент позиционируется на странице и будет ли он отображаться в обычном потоке документа. Оно применяется в сочетании со свойствами смещения блока — top, right, bottom и left, которые точно определяют, где элемент будет расположен путём перемещения элемента в разных направлениях.

По умолчанию у каждого элемента значение position установлено как static, это означает, что элемент существует в обычном потоке документа и не принимает какие-либо свойства для его смещения. Значение static наиболее часто переписывается значением relative или absolute, которые мы рассмотрим дальше.

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

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

HTML

<div>...</div>
<div>...</div>
<div>...</div>

CSS

div {
  height: 100px;
  width: 100px;
}
.offset {
  left: 20px;
  position: relative;
  top: 20px;
}

Демонстрация относительного позиционирования

Здесь для второго элемента <div> с классом offset задано значение position как relative, а также два свойства смещения — left и top. Это сохраняет исходное положение элемента и другим элементам не разрешено двигаться в эту область. Кроме того, свойства смещения перемещают элемент, выталкивая его на 20 пикселей от левого и на 20 пикселей от верхнего исходного местоположения.

Для относительно позиционированных элементов важно знать, что свойства смещения блока определяют, куда элемент будет перемещён, учитывая его исходное положение. Таким образом, свойство left со значением 20 пикселей фактически толкает элемент вправо на 20 пикселей. Свойство top со значением 20 пикселей затем будет толкать элемент вниз на 20 пикселей.

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

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

Значение absolute для свойства position отличается от значения relative тем, что элемент с абсолютным позиционированием не появляется в обычном потоке документа, исходное пространство и положение абсолютно позиционируемого элемента не резервируется.

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

HTML

<section>
  <div>...</div>
</section>

CSS

section {
  position: relative;
}
div {
  position: absolute;
  right: 20px;
  top: 20px;
}

Демонстрация абсолютного позиционирования

В этом примере элемент <section> позиционируется относительно, но не включает каких-либо свойств смещения. Следовательно, его положение не меняется. Элемент <div> с классом offset включает значение position как absolute. Поскольку элемент <section> является ближайшим относительно позиционированным родительским элементом для <div>, то элемент <div> будет позиционироваться относительно элемента <section>.

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

В результате свойств right и top, элемент <div> появится в 20 пикселях справа и 20 пикселях сверху внутри <section>.

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

Резюме

Изучение позиционирования содержимого в HTML и CSS является огромным шагом в сторону освоения этих языков. Добавьте к этому блочную модель и вот мы уверенно движемся по пути превращения во фронтенд-разработчиков.

Для проверки, в этом уроке мы рассмотрели следующее:

  • Что такое float и как его использовать, чтобы позиционировать содержимое.
  • Как очистить и установить содержимое обтекаемых элементов.
  • Как позиционировать содержимое с помощью строчно-блочных элементов.
  • Как удалить пустое пространство между строчно-блочными элементами.
  • Как уникально позиционировать контент через относительное и абсолютное позиционирование элементов.

Мы добавляем новые навыки с каждым уроком, так что давайте продолжим. Следующая тема — типографика!

Ресурсы и ссылки

Автор и редакторы

Автор: Шэй Хоу

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Позиционирование — Изучение веб-разработки | MDN

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

Необходимые знания:

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)

Задача: Изучить как работает CSS позиционирование.

Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию 0_basic-flow.html из нашего GitHub репозитория (исходный код здесь) и используйте его как отправную точку.

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

Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство position.

Статическое позиционирование

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

Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте class positioned ко второму <p> в HTML:

<p> ... </p>

А теперь добавьте следующее правило в конец вашего CSS:

.positioned {
  position: static;
  background: yellow;
}

И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!

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

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

Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства top, bottom, left (en-US), и right которые мы объясним в следующем разделе.

Введение в top, bottom, left, и right

top, bottom, left (en-US), и right используются вместе с position чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу .positioned в вашем CSS:

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

Если вы сейчас сохраните и обновите, вы получите примерно такой результат:

Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали top: 30px;, сила толкает блок, заставляя его перемещаться вниз на 30px.

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

Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:

Если вы сохраните и обновите, то вы должны увидеть нечто подобное:

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

Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что top, bottom, left (en-US), и right ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха «содержащего элемента» и 30px от левого края (В этом случае «содержащий элемент» является исходным содержащим блоком. См. раздел ниже для дополнительной информации).

Примечание: вы можете использовать top, bottom, left (en-US), и right для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните…

Примечание: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.

Контекст позиционирования

Какой элемент является «содержащим» относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).

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

Позиционируемый элемент вложен в <body> в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body:

Это должно дать следующий результат:

Позиционируемый элемент теперь располагается относительно элемента <body>.

Введение в z-index

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

Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}

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

Можете ли вы изменить порядок наложения? Да, можете, используя свойство z-index. «z-index» это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).

У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения z-index влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto, что фактически равно 0.

Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:

Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:

Обратите внимание что z-index принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.

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

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

Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.

А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

Теперь мы собираемся дать элементу <h2> (en-US) position: fixed;, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:

h2 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}

top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.

Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:

p:nth-of-type(1) {
  margin-top: 60px;
}

Теперь вы должны видеть законченный пример:

position: sticky

Доступно другое значение позиции называемое position: sticky, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным.  Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

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

<h2>Sticky positioning</h2>

<dl>
    <dt>A</dt>
    <dd>Apple</dd>
    <dd>Ant</dd>
    <dd>Altimeter</dd>
    <dd>Airplane</dd>
    <dt>B</dt>
    <dd>Bird</dd>
    <dd>Buzzard</dd>
    <dd>Bee</dd>
    <dd>Banana</dd>
    <dd>Beanstalk</dd>
    <dt>C</dt>
    <dd>Calculator</dd>
    <dd>Cane</dd>
    <dd>Camera</dd>
    <dd>Camel</dd>
    <dt>D</dt>
    <dd>Duck</dd>
    <dd>Dime</dd>
    <dd>Dipstick</dd>
    <dd>Drone</dd>
    <dt>E</dt>
    <dd>Egg</dd>
    <dd>Elephant</dd>
    <dd>Egret</dd>
</dl>

CSS может выглядеть как показано ниже. В нормальном потоке элементы <dt> будут прокручиваться вместе с контентом. Когда мы добавляем position: sticky к элементу <dt>, вместе со значением top 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}

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

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Проверьте свои навыки: Позиционирование.

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

Изучаем CSS-позиционирование за 10 шагов — Очередной блог фрилансера

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float.

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

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


#content{
 position: static;
}

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:


#content{
 position: relative;
 top: 20px;
 left: -40px;
}

Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

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

3. position: absolute

При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:


#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.


#div-1a {
 position:fixed;
 top:0;
 right:0;
 width:200px;
}

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

5. position:relative + position:absolute

Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.


#content {
 position:relative;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

6. Две колонки

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


#content {
 position:relative;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.


#content {
 position:relative;
 height: 450px;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

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

8. Float

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

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


#div-1a {
 float:left;
 width:200px;
}

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.


#div-1a {
 float:left;
 width:150px;
}

#div-1b {
 float:left;
 width:150px;
}

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.


#div-1a {
 float:right;
 width:150px;
}

#div-1b {
 float:left;
 width:150px;
}

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

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.


#div-1a {
 float:left;
 width:190px;
}

#div-1b {
 float:left;
 width:190px;
}

#div-1c {
 clear:both;
}

Или же назначить родительскому контейнеру свойство overflow: hidden


#content {
 overflow:hidden;
}

В любом случае, результат будет один и тот же.

Заключение

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

Перевод скринкаста “Learn CSS Positioning in Ten Steps”.

Многослойный вывод — HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.biz

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

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

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

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

Элемент, назначающий локальный позиционный контекст, порождает блок, который имеет два позиционных уровня: первый относится к создаваемому им позиционному контексту (всегда равен нулю), а второй — к позиционному контексту, в котором он находится (указывается свойством ‘z-index’).

Блок, порождаемый элементом, имеет тот же позиционный уровень, что и его родительский блок, если ему не был присвоен другой уровень с использованием свойства ‘z-index’.

Определение позиционного уровня: свойство ‘z-index’

‘z-index’

Значение: auto | <integer> | inherit
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Для размещенного блока свойство ‘z-index’ указывает:

  1. Позиционный уровень блока в текущем позиционном контексте.
  2. Назначает ли блок локальный позиционный контекст.

Значения данного свойства имеют следующий смысл:

<целое>

Данное значение является значением позиционного уровня сгенерированного блока в текущем позиционном контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем ‘0’.

auto

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

В следующем примере позиционные уровни блоков (именованные с использованием атрибута «id»): «text2″=0, «image»=1, «text3″=2 и «text1″=3. Позиционный уровень «text2» наследуется от корневого блока. Другие уровни указываются свойством ‘z-index’.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Позиционирование вдоль оси z</TITLE>
<STYLE type="text/css">
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</STYLE>
</HEAD>
<BODY>
<P>
<IMG
src="butterfly.gif" alt="Бабочка"
style="z-index: 1">

<DIV id=»text1″ class=»pile»
style=»z-index: 3″>
Этот текст будет находиться поверх изображения бабочки.
</DIV>

<DIV id=»text2″>
Этот текст будет находиться под всем остальным.
</DIV>

<DIV id=»text3″ class=»pile»
style=»z-index: 2″>
Этот текст будет находиться ниже текста text1, но поверх изображения бабочки.
</DIV>
</BODY>
</HTML>

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

Как наложить один Div на другой

Как наложить один Div на другой
  1. Фрагменты
  2. HTML
  3. Как наложить один Div на другой

Создание наложения можно легко сделать с помощью CSS. Это можно сделать с помощью комбинации свойств CSS position и z-index. Z-индекс элемента определяет его порядок внутри контекста стека. В наших примерах мы будем использовать «абсолютные» и «относительные» значения свойства position и добавим свойство z-index, чтобы указать порядок размещения позиционируемых элементов.

Итак, начнем!

Создайте HTML¶

  • Используйте элемент
    с классом «контейнер».
  • Добавьте два других элемента
    в первый. Добавьте к ним классы.
  <дел>
  <дел>
  <дел>

Добавить CSS¶

  • Укажите ширину и высоту класса «контейнер». Установите позицию на «относительную» и добавьте свойство поля.
  • Установите для ширины и высоты класса «box» значение «100%». Укажите позицию с «абсолютным» значением. Добавьте свойства top и left. Также укажите фон и непрозрачность класса «коробка».
  • Стилизуйте класс «overlay», используя свойства z-index, margin и background.
  .контейнер {
  ширина: 150 пикселей;
  высота: 150 пикселей;
  положение: родственник;
  поле: 30 пикселей;
}

.коробка {
  ширина: 100%;
  высота: 100%;
  положение: абсолютное;
  сверху: 0;
  слева: 0;
  непрозрачность: 0.7;
  фон: #0057e3;
}

.оверлей {
  z-индекс: 9;
  поле: 30 пикселей;
  фон: #009938;
}  

Теперь мы можем объединить части нашего кода.

Пример наложения одного

на другой:¶
  

  <голова>
    Название документа
    <стиль>
      .контейнер {
        ширина: 150 пикселей;
        высота: 150 пикселей;
        положение: родственник;
        поле: 30 пикселей;
      }
      .коробка {
        ширина: 100%;
        высота: 100%;
        положение: абсолютное;
        сверху: 0;
        слева: 0;
        непрозрачность: 0,7;
        фон: #0057e3;
      }
      .оверлей {
        z-индекс: 9;
        поле: 30 пикселей;
        фон: #009938;
      }
    
  
  <тело>
    <дел>
      <дел>
      <дел>
    
Попробуйте сами »

Результат¶

Давайте посмотрим на другой пример, где мы используем немного больше CSS.Здесь мы добавляем некоторые эффекты зависания, используя псевдокласс CSS :hover.

Пример наложения одного

на другой с эффектом зависания:¶
  

  <голова>
    Название документа
    <стиль>
      .контейнер {
        положение: абсолютное;
        высота: 250 пикселей;
        ширина: 400 пикселей;
        цвет фона: #7d807e;
      }
      .box1 {
        цвет: #fff;
        отступ сверху: 60px;
        отступ слева: 50px;
        размер шрифта: 50px;
        вес шрифта: полужирный;
      }
      .коробка2 {
        отступ слева: 50px;
      }
      .box1: наведите {
        z-индекс: -1;
        непрозрачность: 0,5;
        размер шрифта: 30px;
        выравнивание текста: по центру;
        стиль преобразования: все;
        продолжительность перехода: 2 с;
      }
      .box2: наведите {
        z-индекс: -1;
        непрозрачность: 0,3;
        размер шрифта: 40px;
        выравнивание текста: по центру;
        стиль трансформации: все;
        продолжительность перехода: 2 с;
      }
    
  
  <тело>
    <дел>
      
Документы W3
Изучайте программирование
Попробуйте сами »

Спасибо за отзыв!

Считаете ли вы это полезным? Да Нет


Статьи по теме

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа трафика веб-сайта.Принять

Макет и содержащий блок — CSS: Каскадные таблицы стилей

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

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

  1. Область содержимого
  2. Область заполнения
  3. Пограничная зона
  4. Поле поля

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

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

На размер и положение элемента часто влияет содержащий его блок. Процентные значения, которые применяются к width , height , padding , margin и свойствам смещения абсолютно позиционированного элемента (т. вычисляются из блока, содержащего элемент.

Процесс идентификации содержащего блока полностью зависит от значения свойства элемента position :

  1. Если свойство position равно static , родственнику или sticky , содержащий блок формируется краем блок-контейнер (например, встроенный блок, блок или элемент списка) или устанавливает контекст форматирования (например, табличный контейнер, гибкий контейнер, контейнер сетки или сам блок-контейнер).
  2. Если свойство position равно absolute , содержащий блок формируется краем padding box ближайшего элемента-предка, который имеет значение position , отличное от static ( fixed 9 абсолютный , относительный или липкий ).
  3. Если свойство position равно fixed , содержащий блок устанавливается областью просмотра (в случае непрерывного носителя) или областью страницы (в случае постраничного носителя).
  4. Если свойство position равно absolute или fixed , содержащий блок также может быть сформирован краем padding box ближайшего элемента-предка, который имеет следующее:
    1. A преобразование или перспектива значение, отличное от нет
    2. A будет изменено значение преобразовано или перспектива
    3. Значение фильтра , отличное от . Нет или изменит значение фильтра (работает только в Firefox).
    4. A содержит значение краска (например, содержит: краска; )

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

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

.
  1. Свойства height , top и bottom вычисляют процентные значения от высоты содержащего блока.
  2. Свойства width , left , right , padding и margin вычисляют процентные значения от ширины содержащего блока.

Код HTML для всех наших примеров:

  <тело>
  <раздел>
    

Это абзац!

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

Пример 1

В этом примере абзац позиционируется статически, поэтому содержащий его блок —

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

  <тело>
  <раздел>
    

Это абзац!

  корпус {
  фон: бежевый;
}

раздел {
  дисплей: блок;
  ширина: 400 пикселей;
  высота: 160 пикселей;
  фон: светло-серый;
}

п {
  ширина: 50%;
  высота: 25%;
  маржа: 5%;
  набивка: 5%;
  фон: голубой;
}
  

Пример 2

В этом примере блоком, содержащим абзац, является элемент , поскольку

не является блочным контейнером (из-за display: inline ) и не устанавливает контекст форматирования.

  <тело>
  <раздел>
    

Это абзац!

  корпус {
  фон: бежевый;
}

раздел {
  дисплей: встроенный;
  фон: светло-серый;
}

п {
  ширина: 50%;
  высота: 200 пикселей;
  фон: голубой;
}
  

Пример 3

В этом примере блок, содержащий абзац, равен

, потому что позиция последнего равна абсолютному .На процентные значения абзаца влияет padding содержащего его блока, хотя, если бы значение box-sizing содержащего блока было border-box , это было бы не так.

  <тело>
  <раздел>
    

Это абзац!

  корпус {
  фон: бежевый;
}

раздел {
  положение: абсолютное;
  слева: 30 пикселей;
  верх: 30 пикселей;
  ширина: 400 пикселей;
  высота: 160 пикселей;
  отступ: 30px 20px;
  фон: светло-серый;
}

п {
  положение: абсолютное;
  ширина: 50%;
  высота: 25%;
  маржа: 5%;
  набивка: 5%;
  фон: голубой;
}
  

Пример 4

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

  <тело>
  <раздел>
    

Это абзац!

  корпус {
  фон: бежевый;
}

раздел {
  ширина: 400 пикселей;
  высота: 480 пикселей;
  поле: 30 пикселей;
  отступ: 15 пикселей;
  фон: светло-серый;
}

п {
  положение: фиксированное;
  ширина: 50%;
  высота: 50%;
  маржа: 5%;
  набивка: 5%;
  фон: голубой;
}
  

Пример 5

В этом примере позиция абзаца равна absolute , поэтому его содержащий блок равен

, который является ближайшим предком со свойством transform , отличным от none none .

  <тело>
  <раздел>
    

Это абзац!

  корпус {
  фон: бежевый;
}

раздел {
  преобразование: повернуть (0 градусов);
  ширина: 400 пикселей;
  высота: 160 пикселей;
  фон: светло-серый;
}

п {
  положение: абсолютное;
  слева: 80 пикселей;
  верх: 30 пикселей;
  ширина: 50%;
  высота: 25%;
  маржа: 5%;
  набивка: 5%;
  фон: голубой;
}
  
  • Ключевые понятия CSS: синтаксис CSS, правило, Комментарии, специфичность и наследование, коробка, режимы компоновки и модели визуального форматирования, и маржа рушится, или начальная, вычислено, решено, указанный, использовал, и действительные значения.Определения синтаксиса значений, сокращенные свойства и замененные элементы.
  • Свойство all сбрасывает все объявления CSS до заданного известного состояния

Наложение с плавающими блоками — CSS: каскадные таблицы стилей

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

  1. Фон и границы корневого элемента
  2. Непозиционированные блоки-потомки в порядке появления в HTML
  3. Плавающие блоки
  4. Элементы, расположенные по наследству, в порядке появления в HTML

См. типы позиционирования для объяснения позиционированных и непозиционированных элементов.

На самом деле, как видно из приведенного ниже примера, фон и граница непозиционированного блока (DIV #4) совершенно не зависят от плавающих блоков, но затрагивается содержимое. Это происходит в соответствии со стандартным поведением float. Это поведение можно показать с добавлением правила в приведенный выше список:

  1. Фон и границы корневого элемента
  2. Непозиционированные блоки-потомки в порядке появления в HTML
  3. Плавающие блоки
  4. Потомок непозиционированных встроенных элементов
  5. Элементы, расположенные по наследству, в порядке появления в HTML

Примечание: Если значение непрозрачности применяется к непозиционированному блоку (DIV #4), происходит нечто странное: фон и граница этого блока всплывают над плавающими блоками и позиционируемыми блоками.Это связано со своеобразной частью спецификации: применение значения opacity создает новый контекст стека (см. Что вам никто не говорил о Z-Index).

HTML

  
DIV #1
позиция: абсолютная;
<дел> DIV #2
плавающий: слева;
<дел> DIV #3
float: справа;