• 0
alex_web64

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

Вопрос

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

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

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

 

1.png

Изменено пользователем alex_web64

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 1

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
15 minutes ago, npofopr said:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
7 hours ago, Vlad_P said:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

 

50 minutes ago, Igor Schnaider said:

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

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
1 минуту назад, alex_web64 сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы