How Positioning CSS Properties Interact

When positioning elements, there are four CSS properties we use - display, position, float, and the offset properties (top, right, bottom and left).

However, not all the property-value combinations for these properties can co-exist within the same element. There are specific property-value combinations which will override others. These combinations are -

• display: none
• position: absolute or position: fixed
• float: left or float: right
• position: static

Here is how these property-value combinations interact with the other positioning CSS properties.

display: none #

When the display property on an element is set to none, none of the other positioning properties apply because the box model is never generated.

.foo {
  display: none;

  /* None of these apply */
  position: absolute;
  float: left;
  top: 10px;
}

position: absolute (or fixed) #

Except where display is set to none, if position is set to absolute or fixed, the following applies -

float #

Whatever value is set for the float property is overriden, and the computed value for float is automatically equal to none.

.foo {
  position: absolute;
  float: left; /* ignored, computed value is none */
}

display #

Depending on which value is specified for this property, the computed value may be overriden. The computed value for the display property is set according to the following table.

Specified Value	Computed Value
inline, inline-block, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption	block
inline-table	table
Any other values	Same as specified

In the example below, there will be no difference between .foo and .bar.

.foo {
  position: fixed;
  display: inline-block; /* ignored, computed value is block */
}
.bar {
  position: fixed;
  display: block;
}

float: left (or right) #

Except for where display is set to none, or position is set to absolute/fixed, if an element is floated, the following applies -

display #

Similar to what happens when position is set to absolute/fixed, when an element is floated, the display properties are set according to the table above.

In the example below, there will be no difference between .foo and .bar.

.foo {
  float: left;
  display: inline-block; /* ignored, computed value is block */
}
.bar {
  float: left;
  display: block;
}

position: static #

Except for the previous property-value combinations, if an element has a position of static, the following applies -

offset properties #

When an element is set as position: static, the offset properties - top right bottom left - do not apply.

.foo {
  position: static;
  top: 50px; /* does not apply */
}