Как взаимодействуют float и absolute?
При помощи 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. Интересно именно узнать, какое поведение верное.
Кнопки позиционируются абсолютно, но для них не указаны 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
Чтобы представить себе "статичное положение" для каждой кнопки, удобно рассмотреть их по очереди:
- Первая кнопка, если прописать ей
position: static; float: none, окажется в левом верхнем углу контейнера. - Вторая - справа от первого плавающего блока.
- Третья - справа от двух первых плавающих блоков.
Получается, хром и эксплорер показывают как раз это "статичное положение" для каждой из кнопок, а файерфокс неправ.
-
22:17
-
22:13
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
-
20:12
-
20:06
-
19:59
-
19:51
-
19:43
-
18:31
-
18:25
- Почему SERVER_ADDR имеет не тот IP 48046 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30577 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 24004 visits
- Как через css изменить цвет png изображения? 10423 visits
- Blob video url download 10015 visits
- Php curl запрос через прокси с авторизацией 9291 visits
- Работа с captcha vk api 8156 visits
© "hostciti.net" 16.4.2025 | 14:46