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 elem…


This content originally appeared on bitsofcode and was authored by Ire Aderinokun

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 */
}


This content originally appeared on bitsofcode and was authored by Ire Aderinokun


Print Share Comment Cite Upload Translate Updates
APA

Ire Aderinokun | Sciencx (2015-10-27T00:00:00+00:00) How Positioning CSS Properties Interact. Retrieved from https://www.scien.cx/2015/10/27/how-positioning-css-properties-interact/

MLA
" » How Positioning CSS Properties Interact." Ire Aderinokun | Sciencx - Tuesday October 27, 2015, https://www.scien.cx/2015/10/27/how-positioning-css-properties-interact/
HARVARD
Ire Aderinokun | Sciencx Tuesday October 27, 2015 » How Positioning CSS Properties Interact., viewed ,<https://www.scien.cx/2015/10/27/how-positioning-css-properties-interact/>
VANCOUVER
Ire Aderinokun | Sciencx - » How Positioning CSS Properties Interact. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/10/27/how-positioning-css-properties-interact/
CHICAGO
" » How Positioning CSS Properties Interact." Ire Aderinokun | Sciencx - Accessed . https://www.scien.cx/2015/10/27/how-positioning-css-properties-interact/
IEEE
" » How Positioning CSS Properties Interact." Ire Aderinokun | Sciencx [Online]. Available: https://www.scien.cx/2015/10/27/how-positioning-css-properties-interact/. [Accessed: ]
rf:citation
» How Positioning CSS Properties Interact | Ire Aderinokun | Sciencx | https://www.scien.cx/2015/10/27/how-positioning-css-properties-interact/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts