CSS Reference: Display and Position
This is a quick reference for how CSS display and position properties work.
Elements are arranged from left to right, top to bottom. Display properties define how elements are treated when being placed in the flow.
- Aligns with baseline (as in, the baseline on which text is aligned)
- Margins and padding are only applied horizontally
- Will ignores width and height
- Will not allow other elements to be on the same line (except “run-in” siblings)
- Width and height are respected
- Same as “block”, but will allow other elements on the same line
- Allows elements to be on the same line as a block element
- Can be used for things like this: <h1>T</h1><p>his is a title</p>
- The best resource there is: CSS Tricks: A Complete Guide to Flexbox
- The best resource there is: CSS Tricks: A Complete Guide to Grid
Remember: position property doesn’t cascade!
- The default value
- Left, right, top, bottom and z-index are ignored, decided by browser
- Element’s position is relative to itself
- Overlaps static elements
- Left, right, top, bottom and z-index are respected
- L, R, T, B properties just nudge the element in its place
- Remove element from flow and float it, relative to the nearest relative or absolute positioned ancestor
- Same as absolute, but positioned relative to viewport instead of nearest relative or absolute positioned ancestor