Comparing CSS Display and CSS Position

The two CSS properties, display and position, cause a lot of headache. The issue is that they work in tandem as both properties influence where elements are located on a screen. In addition, HTML elements can have different display values by default making things more complicated. In this post, I’ll untangle the two.

CSS Position Property

The position property determines how an element is positioned in the document flow. The default value is static in which case the element is positioned according to the normal flow?The normal flow of the document is essentially the default layout behavior of elements on a website before we intervene with CSS of the document.

The property can take one of the following values: static, relative, fixed, absolute or sticky.

• static: This is the default position value for all elements. They are not affected by top, bottom, left, and right properties.

  This span has position: static

• relative: Positions elements relative to their normal (i.e. static) position. Contrary to static, the top, bottom, left, and right properties do have an influence.

  This span has position: relative and right: 40px

• fixed: The positioning happens relative to the viewport, so the element stays in the same place even if you scroll (see the element at the bottom of your screen).

  This span has position: fixed and bottom: 0px

• absolute: Takes an element out of the normal document flow and positions it relative to its nearest positioned ancestor?An element is called positioned when it has the CSS position property set to a value other than static.. If there are no positioned ancestors, the positioning occurs relative to the document body.

  This parent span has position: relative and the green child span has position: absolute, bottom: 0px, and right: 0px.

  😎

• sticky: Changes the position value between relative and fixed depending on the scroll position.

  Scroll down on this element to see the sticky effect.

  This span with position: sticky stays at the top.

  Be aware that position: sticky only works if at least one of the following is defined: top, bottom, left, or right.

So what have we learned so far? The position property positions elements. Most importantly, it allows us to take things out of the document flow, position: absolute, or move things relative to their ‘normal’ position within the document flow, position: relative.

CSS Display Property

To understand the display property, it helps to briefly understand how a browser renders a webpage:

• Document Object Model (DOM): First, the browser parses HTML to create the DOM tree, representing the hierarchy of all elements.
• CSS Object Model (CSSOM): In parallel, the browser parses CSS to create the CSSOM tree, which contains all the style information for each element.
• Render Tree: The browser then combines the DOM and CSSOM to create a "render tree". This contains only the visible elements with their computed styles.
• Layout: The browser calculates the exact position and size of each element in the render tree, creating the "formatting box tree" where each element gets a principal box.
• Paint: Finally, the browser draws (or "paints") each element according to the layout.

The display property controls the inner and outer display type of the previously mentioned principal box.

Outer Display Type

The outer display type specifies how the principal box participates in the flow of the document. By far the most common types are:

• block: Block elements take up the whole width of their parent element and start on a new line.

• inline: Inline elements do not start on a new line - hence the name 'inline' which is short for 'within a line'. They are not affected by height and width properties.

• inline-block: Inline-block elements are inline elements that are affected by height and width properties.

With the three bullet points above in mind, feel free to play around with the demo below.

Inner Display Type

The inner display type specifies how child elements of a box are laid out. There are quite a few but the most common ones are: flex, grid, and table. I’ll spare the details of these for another post because there’s too much to cover.

Box Generation and Visibility

To this point, we’ve seen that the display property controls the boxes. But, on a final note, it’s also worth mentioning that it also controls the generation and visibility of the boxes:

• hidden: Any boxes generated by the element are invisible but take up space in the document object model.

• none: The element and its descendants generate no boxes or text sequences.

Summary

The position property determines how an element is positioned in the document flow. When elements have the position: static value, they are positioned in the normal flow of the document. Other values allow elements to be positioned differently, removing them from the normal flow.

The display property determines how an element behaves within the normal flow. For example, does it take up the full width of its parent? Or does it start on a new line?

We distinguish between the outer and inner display types. The outer display type determines how the element participates in the document flow. The inner display type determines how the element's children are laid out.

Max Rohowsky, Ph.D.

Hey, I'm Max

I'm here to see you win, and I hope this post helps along the way - feel free to say "hi":