CSS – Display Cheat Sheet

Display

Block
This makes the element a block box. It won’t let anything sit next to it on the page! It takes up the full width.

Inline-Block
This makes the element a block box, but will allow other elements to sit next to it on the same line.

Inline
This makes the element sit on the same line as another element, but without formating it like a block. It only takes up as much width as it needs (not the whole line).

None
This makes the element and its content disappear from the page entirely.

Position

Absolute
The first type of positioning is absolute positioning. When an element is set to position: absolute, it’s then positioned in relation to the first parent element it has that doesn’t have position: static. If there’s no such element, the element with position: absolute gets positioned relative to html.

Tim Say’s: The major concept to understand is that “absolute” positioning takes the element out of the normal document flow. Meaning that the other elements will arrange themselves as if the absolutely positioned element didn’t exist.

Relative
Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning.

If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn’t move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been.

Fixed
Finally, fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.