Save 37% off PRO during our Black Friday Sale! »

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

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

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

317e499b0a1a7f00cbbe58d365a4377f?s=128

Ben Smithett

November 08, 2018
Tweet

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!