Objects in Space: A practical guide to CSS display, position & z-index

CSS layout for people who don't do much CSS.

Transcript

1. objects in space a practical guide to CSS display, position & z-index
2. Codepens to play around with this stuff: Display: https://codepen.io/bensmithett/pen/rQOrBx Position: https://codepen.io/bensmithett/pen/LXGMzX Z-index: https://codepen.io/bensmithett/pen/yQeZGZ
3. Why "objects in space"? Why these 3 properties?
4. X (pixels) Y (pixels) Most of the CSS we write is for "layout" i.e. arranging boxes in a 2D space
5. X (pixels) Y (pixels) Sometimes the boxes are nested inside other boxes
6. X (pixels) Y (pixels) Sometimes the size & position of a box is determined by the size & position of other boxes (maybe ancestor, sibling or descendant!)
7. X (pixels) Y (pixels) display & position are responsible for all of that Understanding them is important!
8. X (pixels) Y (pixels) Not strictly 2D space... boxes can be stacked!
9. X (pixels) Y (pixels) So there's a z-axis, but it's a bit weird... Z (not pixels?!)
10. X (pixels) Y (pixels) It's a strange 3D space... one of the axes is not measured in the same units as the others display, position & z-index are responsible for arranging boxes in our 3D space Z (not pixels?!) Understanding how the 3 of them work together is vital!
11. Why "a practical guide"? Because this is how I use these properties to 🚢 stuff Not a comprehensive guide to everything the spec says you can/should do. (Nobody you know who is good at CSS got good at CSS by reading specs) I'm probably definitely misusing some of the terminology 󰤈 It's the broad concepts that matter
12. display
13. display Old World vs New World
14. Old World display values: display: inline; display: block; display: inline-block; display: none; All about how your box behaves relative to adjacent stuff
15. display: inline; Use it when your box is "in a line of text" Already a sensible default on most elements that will ever need this layout behaviour a em strong span Useless for anything other than this one job! You probably don't need it.
16. (codepen demo)
17. display: block; A box! (Usually what you want) Fills 100% width of parent element Height determined by contents Other CSS properties work as expected, e.g. height padding width
18. display: block; Breaks out of a line of text if you use it in a line of text.
19. (codepen demo)
20. display: inline-block; When your box is "in a line of text" but you want other CSS properties to behave as if it's display: block Kind of silly & not really useful in practice. You probably don't need it.
21. (codepen demo)
22. At this point in the old days, we had to resort to things like display: inline-block; float: left; <table> or display: table; to make our boxes lay out in a way that look liked an application rather than a document No more!
23. New World display values: display: flex; display: grid; In terms of how your block behaves relative to adjacent stuff, exactly the same as display: block; but also...
24. Flex container (parent) Flex item (child) ...they control the layout of items they contain! Grid container (parent) Grid item (child)
25. You can accomplish most of the same layouts with both flex & grid Some people say "use Flexbox for 1 dimensional layouts & Grid for 2 dimensional layouts". Probably the spec's intention too 󰤇 Ignore them. Use whichever gets the job done with the simplest code. The main difference is how where you specify child item behaviour.
26. display: flex; A lazy parent. You need to tell its children directly how to behave. e.g. if Flexbox's kid is kicking your seat on the plane, you'll need to turn around and yell at them. Flexbox will be sitting there watching movies like nothing's wrong. It kind of did some half-assed parenting by making them Flex Items, and it'll get involved reluctantly if you really need it too, but mostly the Flex kids are left to work things out among themselves. display: flex flex: 1 margin-right: 20px flex: 2
27. display: grid; A very strict parent. Top-down control of child behaviour. display: grid; grid-template-columns: 1fr 2fr; grid-gap: 20px;
28. That's mostly it. They're both useful. Importantly, they allow us to clearly specify the roles we need to do "layout" in CSS • A 2D "space", within which we want to arrange some boxes ◦ i.e. the Flex or Grid Container • Some boxes that will be arranged within that space ◦ i.e. the Flex or Grid Items
29. (codepen demo)
30. position
31. Doesn't actually set position. Sets position "mode" under which other "positioning" properties top bottom left right will operate
32. position: static; (the default) Not much happens. Positioning properties have no effect.
33. (codepen demo)
34. position: relative; Does 2 things 1: Make the thing positionable relative to its default (static) position with top left right bottom These are companion properties of position Would have been helpful if they were called top-position left-position etc... position: relative; top: 20px;
35. position: relative; 2: Establish a new positioning context ...wtf is a positioning context? position: relative;
36. CSS boxes aren't very good boxes by default. If we tried to position this dog 10px from the top & 20px from the left walls of the box, CSS would position it relative to the surrounding room's walls instead. The walls of the box are stupid ghost walls. CSS thinks you're trying to position the dog relative to the nearest positioning context (probably the <body>) To position things relative to the box's boundaries, you need to establish a new positioning context. Make the walls solid. Reset (0,0).
37. 2: Establish a new positioning context A new positioning context just resets (0, 0) for our coordinate system to the top left corner of the current element. Anything you position inside that box will now happen relative to the new (0, 0) point. position: relative; position: relative;
38. (codepen demo)
39. position: absolute; Does 3 things 1: Make the thing positionable relative to the nearest positioning context with top left right bottom Different to position: relative, which made the thing positionable relative to its own default position position: absolute; top: 20px;
40. position: absolute; 2: Establish a new positioning context Resets (0,0) for child elements, exactly like position: relative does position: relative;
41. position: absolute; 3: Take the element out of the document flow Adjacent elements will act like it's not there! position: relative;
42. (codepen demo)
43. X (pixels) Y (pixels) That gives us enough tools to arrange boxes in 2D space to create this layout. (Does it? Questions?)
44. X (pixels) Y (pixels) What about our weirdo third half-dimension? How do we arrange boxes along our z axis? Z (not pixels?!)
45. z-index
46. Secret Front End Developer Power Move Pretend z-index is just like top & left It's just another property you can use to position a box inside a known space.
47. Use it to position a thing within the current positioning context. Literally the only difference... X axis units: pixels Y axis units: pixels Z axis units: stacking order relative to other things in the same positioning context
48. X (pixels) Y (pixels) Z (not pixels?!) position: absolute; top: 20px; left: 5px; z-index: 1; position: absolute; top: 5px; left: 30px; z-index: 2;
49. X (pixels) Y (pixels) Z (not pixels?!) position: absolute; top: 20px; left: 5px; z-index: 1; position: absolute; top: 5px; left: 30px; z-index: 2; Elements don't know about the Z axis (and so z-index won't have any effect) unless they're "positioned" (so give it absolute or relative position)
50. Done!