0

According to the specs, inline elements with a position of absolute should be computed as 'display: block', yet, they clearly do not behave like block-level elements. Their width is not 100% of their parent, and they don't start on a new line. So, in what way exactly are they 'block'? If their principle box is now 'block-level box', then why do they behave differently? Why aren't their width dimensions 100% of their parent width?

.span-block {
background-color:red;
display:block;
}

.span-absolute {
background-color:blue;
position:absolute;
}
<span class="span-block">This is inline element with display block</span>
<span>Normal span</span>
<span class="span-absolute">This is inline element with position absolute</span>

Also, when you have an inline element with a position absolute, if you now set its display property to 'block', it will change its behavior in a way that, it will start on a new line, which further proves that, simply being position absolute does not make the element behave like an element whose display property is 'block', however, with 'display block' and 'position absolute', the element starts on a new line, but still does not occupy 100% of the width.

.span-block {
background-color:red;
display:block;
}

.span-absolute {
background-color:blue;
position:absolute;
display:block;
}
<span class="span-block">This is inline element with display block</span>
<span>Normal span</span>
<span class="span-absolute">This is inline element with position absolute</span>

I am confused about what exactly does position absolute do to an inline element? What box is being generated? Why does it not behave like a block despite saying that the element is computed as display block? And why does making it display block while being position absolute only makes the element start on a new line, but still not behaving like a block-level element does?

  • *According to the specs, inline elements with a position of absolute should be computed as 'display: block'* --> as you read, it simple said *computed*. It doesn't say it should *behav as* – Temani Afif Jan 03 '21 at 14:26
  • (1) first duplicate to explain the width of position:absolute element (2) second duplicate will deal with your last snippet to explain why display:block will change the position (but won't affect the width expained in (1)) – Temani Afif Jan 03 '21 at 14:29
  • add a third duplicate explaining the same as the second one with an example closer to yours – Temani Afif Jan 03 '21 at 14:39
  • @TemaniAfif Hey. The only thing that I am not getting is the explanation about using display block and position absolute. The answer in the 3rd duplicate explains that, the absolutely positioned element is computed as 'block' only after the position is calculated, so supposedly that's why it doesn't go on a new line. But this confuses me. 1) if the display property becomes 'block' after the position is calculated, shouldn't the element behave like a block, precisely because it's AFTER the position calculation? 2) Isn't that what happens when I separately set display to 'block' after the –  Jan 03 '21 at 23:12
  • ..after the position absolute? What is the difference? If the position absolute makes it display block, then why does separately setting the display property to block works? Isn't the display property already set to block? 3) does the position absolute changes the display property to block, or does it simply makes the default value of display be computed as 'block', which is different how? This is what confuses me. –  Jan 03 '21 at 23:14
  • position:absolute will never behave as block element. It's taken out of the flow and have its own rules of position and sizes. Your confusion lies in the *position static* part since you didn't set any top/left/right/bottom value and youf element need to get a position so it gets the one before applying position:absolute (and only here display:block make a difference). Having the display computed as block never imply that an element is a block level one. appllying float will also force the display to be block, flex item will also have display:block and none of them behave as block elements – Temani Afif Jan 03 '21 at 23:19
  • worth to note that you have the outside world of the element and the inside world. An element having display:block will create either a block formatting context or an inline formatting context based on it's content. So inside the position:absolute element will behave like any block element BUT not the outside. A simply div is a in-flow element while an absolute one is out of the flow one (both behave the same from the inside and not the outside) – Temani Afif Jan 03 '21 at 23:21
  • @TemaniAfif So, you're saying that, "computed as block" refers only to the inner display type, and not the outer one? So, that means that the element in essence is like inline-block. But if that's the case, then why did the answer from the 3rd duplicate say, or at least imply that, the element doesn't move to a new line despite being position absolute because it is blockifying only after the position is calculated? If the blockifying refers only to the inner display type, then it doesn't matter when it happens, the element will never go on a new line because the outer box remains inline. –  Jan 04 '21 at 11:48
  • as I said you are confusing between two things that aren't related. The placement of the block element is a thing and it has nothing to do with the fact that the element is blockified. Two orthogonal things. Don't mix them and take them as independant. To place the element we need to use something called *static position* and this one is defined by the position of the element BEFORE applying positon:absolute, that's all. What is done after and the blockified part is irrelevant to the position. – Temani Afif Jan 04 '21 at 11:56
  • Anyway, thanks for clearing up some of the confusion. It seems that by computed as block, they've meant that, they're making the formatting context block, not the principle box. –  Jan 04 '21 at 11:57
  • Okay - thanks again. –  Jan 04 '21 at 11:58

0 Answers0