views

Display and Position in CSS

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 belongs to a module from the CSS specification called CSS positioned layout module. The modules in the specification attempt to bundle related topics in the otherwise messy CSS world. This module covers things like top, right, bottom, left, z-index, position, and a few others. Below, we’ll take a close look at the position property.

The position property decides where on the screen an element is shown. It 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.

You might have heard about the z-index. It allows us to influence how positioned elements are stacked. It’s important to note that it only works on ‘positioned’ elements, so elements that have a position value other than static.

CSS Display Property

In essence, CSS interprets the Document Object Model (DOM)?The Document Object Model (DOM) helps to represent the structure of a document as a tree of elements and text nodes. For example, the HTML document that makes up this website is represented as a Document Object Model (DOM). and translates it to visual elements on a screen.

Before that happens, an intermediary structure called the formatting box tree is made from the DOM elements. It defines the layout and visual formatting of the elements that are to be displayed on screen.

Usually, one box is generated per DOM element, the principal box. And the the display property controls the inner and outer display type of the principal box (more on that here).

Outer Display Type

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

block: Block elements start on a new line, and take up the whole width such as <p> tags.
inline: Inline (aka. within a line) elements, such as <span>, are not affected by height and width properties. And they do not start on a new line.

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.

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.

I hope this post has helped you understand the difference between the display and position properties in CSS at least a little better.