3

I'm sure this has something to do with position:absolute and that overriding the css display property to block.

As you can see in the image below (and this fiddle) the div on the left (absolute) doesn't vertically center it's text but the one on the right does (it's relative). If seen in chrome debugger, the former has display:block and the latter display:table-cell.

enter image description here

Question: I know positioning something absolutely 'removes it from the flow of the document' but does that imply that it will NOT override display and everything will be defaulted to it's default display (i.e. block for divs, inline for spans etc.) Why? Is there a specific reason for this behavior?

The Alpha
  • 143,660
  • 29
  • 287
  • 307
PhD
  • 11,202
  • 14
  • 64
  • 112

2 Answers2

4

This is required by the spec:

if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below

In the table shown in that section of the spec, any of the table-related values for 'display' computes to 'block' instead.

As you say, absolutely positioning something will remove it from normal flow; as such, it no longer has a table to display in and therefore it no longer makes sense to display it as a table cell. In order for an element to be displayed as a table cell, it needs the proper container, and it would seem that these can only be generated implicitly in normal flow.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
2

Any element with position:absolute will be treated as display:block. It will not be treated with its default.

'removes it from the flow of the document'

Means that it will be treated as it's own graphical entity, not in relation to any other entities. An element can only be displayed as a table-cell in relation to a table. Most of the display modes only make sense in relation to other elements. The main exceptions are 'block' and 'none'

I made a very rough fiddle that shows a sample of relative vs absolute for various display types for both div and span elements. Notice that display:none works for both relative and absolute positioning, but display:inline only works for relative.

Tony
  • 953
  • 1
  • 10
  • 22