Как взаимодействуют float и absolute?

146
02 декабря 2018, 10:40

При помощи float: left расположим подряд несколько дивов в строку, а перед каждым из них добавим кнопку и пропишем ей position: absolute: https://jsfiddle.net/v4xjy9d3/2/

div { 
  width: 10em; 
  height: 10em; 
  float: left; 
  background: linear-gradient(to right, silver, blue); 
} 
 
button { 
  position: absolute; 
}
<button>Button</button> 
<div></div> 
<button>Button</button> 
<div></div> 
<button>Button</button> 
<div></div>

В хроме блоки встают подряд, а кнопка накладывается на каждый из блоков. А вот Firefox сначала расставил все float'ы, а потом аналогично тексту разместил все кнопки после них одну поверх другой. Кто из браузеров прав в данном случае?

PS: Как исправить я и сам знаю - обернуть каждую пару в блок, которому и ставить float. Интересно именно узнать, какое поведение верное.

Answer 1

Кнопки позиционируются абсолютно, но для них не указаны left, right и width. Когда все три этих параметра оказываются auto (их значение по умолчанию), спецификация предписывает рассчитать их так, чтобы абсолютно спозиционированный элемент оказался там же, где бы он был при position: static и float: none.

Такое положение элемента называется "static position":

the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow

Чтобы представить себе "статичное положение" для каждой кнопки, удобно рассмотреть их по очереди:

  1. Первая кнопка, если прописать ей position: static; float: none, окажется в левом верхнем углу контейнера.
  2. Вторая - справа от первого плавающего блока.
  3. Третья - справа от двух первых плавающих блоков.

Получается, хром и эксплорер показывают как раз это "статичное положение" для каждой из кнопок, а файерфокс неправ.

READ ALSO
Приоритет в addListenr
javascript

Приоритет в addListenr

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

 132
Открытие меню по клику
javascript

Открытие меню по клику

Я делаю генератор формыИ возник вопрос

 205
Анимация на Javascript не плавная
javascript

Анимация на Javascript не плавная

Подскажите, почему анимация не плавная?

 244
Как организовать скрытие меню?
javascript

Как организовать скрытие меню?

Имеем 2 уровневое меню

 167