Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Ben Smithett

November 08, 2018

More Decks by Ben Smithett

Other Decks in Programming


  1. 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
  2. X (pixels) Y (pixels) Most of the CSS we write

    is for "layout" i.e. arranging boxes in a 2D space
  3. 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!)
  4. X (pixels) Y (pixels) display & position are responsible for

    all of that Understanding them is important!
  5. X (pixels) Y (pixels) So there's a z-axis, but it's

    a bit weird... Z (not pixels?!)
  6. 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!
  7. 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
  8. Old World display values: display: inline; display: block; display: inline-block;

    display: none; All about how your box behaves relative to adjacent stuff
  9. 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.
  10. 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
  11. display: block; Breaks out of a line of text if

    you use it in a line of text.
  12. 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.
  13. 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!
  14. 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...
  15. Flex container (parent) Flex item (child) ...they control the layout

    of items they contain! Grid container (parent) Grid item (child)
  16. 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.
  17. 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
  18. display: grid; A very strict parent. Top-down control of child

    behaviour. display: grid; grid-template-columns: 1fr 2fr; grid-gap: 20px;
  19. 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
  20. Doesn't actually set position. Sets position "mode" under which other

    "positioning" properties top bottom left right will operate
  21. 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;
  22. 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).
  23. 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;
  24. 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;
  25. position: absolute; 2: Establish a new positioning context Resets (0,0)

    for child elements, exactly like position: relative does position: relative;
  26. position: absolute; 3: Take the element out of the document

    flow Adjacent elements will act like it's not there! position: relative;
  27. X (pixels) Y (pixels) That gives us enough tools to

    arrange boxes in 2D space to create this layout. (Does it? Questions?)
  28. X (pixels) Y (pixels) What about our weirdo third half-dimension?

    How do we arrange boxes along our z axis? Z (not pixels?!)
  29. 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.
  30. 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
  31. 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;
  32. 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)