Jump to content
  • 0

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


alex_web64
 Share

Question

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

Все время считал, что после применения абсолютного позиционирования к элементам их свойство 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

Edited by alex_web64
Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 1

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
7 hours ago, Vlad_P said:

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

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

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

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

Link to comment
Share on other sites

  • 0

 

50 minutes ago, Igor Schnaider said:

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

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

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

 

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy