Укладка плавающих элементов

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

Фон и границы корневого элемента.
Дочерние элементы без позиционирования, в порядке их появления в HTML.
Плавающие элементы.
Дочерние позиционированные элементы, в порядке их появления в HTML.

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

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

Пример

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

Фон и границы корневого элемента.
Дочерние элементы без позиционирования, в порядке их появления в HTML.
Плавающие элементы.
Дочерние элементы встраивания без позиционирования.
Дочерние позиционированные элементы, в порядке их появления в HTML.

HTML

<div id="abs1"><strong>DIV #1</strong><br />position: absolute;</div>

<div id="flo1"><strong>DIV #2</strong><br />float: left;</div>

<div id="flo2"><strong>DIV #3</strong><br />float: right;</div>

<br />

<div id="sta1"><strong>DIV #4</strong><br />no positioning</div>

<div id="abs2"><strong>DIV #5</strong><br />position: absolute;</div>

<div id="rel1"><strong>DIV #6</strong><br />position: relative;</div>

CSS

div {
  padding: 10px;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  position: absolute;
  width: 150px;
  height: 200px;
  top: 10px;
  right: 140px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  height: 100px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

#flo1 {
  margin: 0px 10px 0px 20px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#flo2 {
  margin: 0px 20px 0px 10px;
  float: right;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#abs2 {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 80px;
  left: 100px;
  border: 1px dashed #990;
  background-color: #fdd;
}

#rel1 {
  position: relative;
  border: 1px dashed #996;
  background-color: #cff;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

Результат

См. также

Укладка без свойства z-индекса: Правила укладки, которые применяются, когда z-index не используется.
Использование z-индекса: Как использовать z-index для изменения стандартной укладки.
Контекст укладки: Примечания по контексту укладки.
Пример контекста укладки 1: 2-уровневая иерархия HTML, z-индекс на последнем уровне
Пример контекста укладки 2: 2-уровневая иерархия HTML, z-индекс на всех уровнях
Пример контекста укладки 3: 3-уровневая иерархия HTML, z-индекс на втором уровне

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements