CSS Crash Course: Display and Position

A solid understanding of how the position and display attributes work will take you far! Chances are you already have a fuzzy idea of what these attributes do. Hopefully this tutorial will demystify them completely.

Throughout this tutorial, you will see embedded code examples made in CodePen. Click on the "HTML" and "CSS" buttons to see the code used in the example. Click on "Edit in CODEPEN" (at the top right of each CodePen embed) to play with the example interactively! You can edit it and see what happens hands-on. I highly encourage doing so to get a hands-on learning experience!

01. The display attribute

The display attribute tells you how the element acts within the flow of the document. It most commonly takes the values of inline, inline-block, or block.

• inline means that the element is in line with the text. In fact, all words/text are inline elements. These elements don't have a fixed width - think about it, when you type a bit a text, it just takes up whatever width it takes up. Thus, if you set a width on an element that's display: inline, you will find that this width attribute gets completely ignored. All span elements are inline by default.
• block means that the element gets its own section of the page. Think of a block element like a chart or figure in a document. If you write multiple block elements, they'll each show up in their own row, as if there are line breaks in between them. Block elements, just like figures and charts in a paper, have a fixed width and height. They are 100% width by default, due to the idea that they should take up their own section of the page (so one would think there's no reason for them to be any other width). All div elements are block by default.
• inline-block means that the element has a fixed width and height, but should flow in line with the text. When you set an element's display to inline-block, you can also set a vertical-align attribute that specifies how it lines up with the text. For instance, vertical-align: top means that the top of the element lines up with the top of the text. vertical-align: baseline means that it will line up like an inline element (sitting on the same baseline as the text). Inline-block can be used to place elements side by side.

One cool thing about inline-block is that it can be used to place elements side-by-side. Here is an example to demonstrate:

See the Pen inline-block example by C Yang (@cheryllium) on CodePen.

It's interesting to note that because inline-block elements are inline, they are affected by properties on the parent that affect inline children, such as text-align. Try uncommenting line 10 in my example there (the text-align: center line) and notice how it causes the inline-block elements to center.

02. The position attribute

First off, everything by default is position: static, which we may also call "statically positioned", which means it gets positioned naturally according to its display attribute in the flow of the page. But there's some other values, with offsets denoted by left, right, top, bottom. These offsets mean different things however for each of these position values!

• fixed will always position the element relative to the window. (Well, almost always, but the exceptions are obscure.) It doesn't matter what the element's parent is, or if the parent is fixed or absolute or whatever. It will always be relative to the window - that's why it does not scroll with the rest of the page.
• relative will position the element relative to where it would be if it were statically positioned. Used with no offsets, it will be in the same place as if you didn't set the position on it. If you offset it, it gets shifted in that direction by a little bit. For instance, top: 5px means that the element will be shifted upwards 5px. However, the element will still "take up" the original space, not the new space, in the flow of the page!
• absolute will always position the element relative to the closest absolutely or relatively positioned parent.

The behavior of absolutely positioned elements is easiest to understand with an example:

See the Pen absolute + relative positioning by C Yang (@cheryllium) on CodePen.

In this example, the parent (.big-white-box) is positioned statically. First, let me direct your attention to .blue (the blue square). This child is positioned absolutely. You'll notice that it gets positioned relative to the body (the page itself) because its parent is static, and it will ignore static parents.

In the meantime, the child .yellow is set to position: relative with no offsets. So it shows up where it would otherwise - nestled happily inside of the parent (.big-white-box). But it has a child called .purple (the purple square) and .purple is position: absolute. Now, .purple ends up having its offsets relative to .yellow, because .yellow is its closest absolutely or relatively positioned parent.