Абсолютно позиционированные элементы и свойство display

[alex_web64]

Здравствуйте.

Все время считал, что после применения абсолютного позиционирования к элементам их свойство display по умолчанию устанавливается в block. Но сегодня пришлось усомниться в этом. Смотрите пример https://jsfiddle.net/9z3ehbpa/2/ Две последние линии каждой из кнопок созданы с помощью ::before и ::after (display: inline по умолчанию developer.mozilla.org). При этом для второй кнопки псевдоэлементам прописано свойство display: block, что, по идее, лишнее, так как это происходит по умолчанию для position: absolute (согласно таблицы inline превращается в block www.w3.org)

Почему же кнопки отображаются по разному?

 

Edited August 3, 2018 by alex_web64

[Igor Schnaider]

По поводу расположения написал же выше.

Кажется понял, в чем у вас путаница. position: absolute делает элемент блочным в том смысле, что у него создается блочный контекст форматирования. Это не совсем одно и то же, что и display: block.

[Igor Schnaider]

Когда вы вынимаете элемент из потока и не указываете значения top, left и т. п., этот элемент будет находится там, где он был в потоке.

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

У display: block все наоборот: он сразу стоит там, где вам нужно. И когда вы вынимаете его из потока, его левый/верхний край будет там, где был изначально – влево вверху кнопки.

Вот собрал пример, попробуйте.

[npofopr]

А можно просто left: 0; задать.

[alex_web64]

15 minutes ago, npofopr said:

А можно просто left: 0; задать.

Можно, но меня интересует причина такого поведения.

[Vlad_P]

Ну положим они не совсем block. Но тут дело не в этом. попробуйте убрать в инструментах свойство block для псевдоэлементов во второй кнопке. Ничего не изменится. Дело в том, что, если left top не заданы жестко, они принимают значение auto. т.е. браузер проставляет его как считает нужным. Так, для первой кнопки мозила пишет left: 20px; right: -20px; Правда почему так, понять у меня не вышло

[alex_web64]

7 hours ago, Vlad_P said:

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

Действительно. Но что интересно, если сделать то же самое, убрав из кода

.btn2 .hamburger-inner::after, .btn2 .hamburger-inner::before {
  display: block;
}

и обновив страницу, то кнопка меняется.

[alex_web64]

 

50 minutes ago, Igor Schnaider said:

У display: block все наоборот: он сразу стоит там, где вам нужно. И когда вы вынимаете его из потока, его левый/верхний край будет там, где был изначально – влево вверху кнопки.

в теории так и должно быть, но в моем примере видно, что это не так, что собственно и вызвало у меня вопросы. Псевдоэлементы после применения к ним position: absolute должны становиться блочными, согласно спецификации, и располагаться слева кнопки. На деле же такого состояния можно добиться только явно прописав им display: block, до этого они ведут себя как строчные элементы, начинаясь с центра кнопки.

И второй теперь уже вопрос, почему отключение display: block в инспекторе никак не влияет на положение элементов, хотя удаление с исходников влияет.

 

[Igor Schnaider]

1 минуту назад, alex_web64 сказал:

Псевдоэлементы после применения к ним position: absolute должны становиться блочными

Блочными и становятся. Иначе ширина и высота были бы по содержимому, а не согласно установленным стилям.

[alex_web64]

но ведь явное применение display: block влияет на них, меняя расположение. Значит они не до конца блочные

[alex_web64]

Теперь понял, спасибо.