$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Ben Smithett

Other Decks in Programming

Transcript

  1. objects in space
    a practical guide to CSS display, position & z-index

    View Slide

  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

    View Slide

  3. Why "objects in space"?
    Why these 3 properties?

    View Slide

  4. X (pixels)
    Y (pixels)
    Most of the CSS we write is for "layout"
    i.e. arranging boxes in a 2D space

    View Slide

  5. X (pixels)
    Y (pixels)
    Sometimes the boxes are nested inside other boxes

    View Slide

  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!)

    View Slide

  7. X (pixels)
    Y (pixels)
    display & position are responsible for all of that
    Understanding them is important!

    View Slide

  8. X (pixels)
    Y (pixels)
    Not strictly 2D space... boxes can be stacked!

    View Slide

  9. X (pixels)
    Y (pixels)
    So there's a z-axis, but it's a bit weird...
    Z (not pixels?!)

    View Slide

  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!

    View Slide

  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

    View Slide

  12. display

    View Slide

  13. display
    Old World vs New World

    View Slide

  14. Old World display values:
    display: inline;
    display: block;
    display: inline-block;
    display: none;
    All about how your box behaves relative to adjacent stuff

    View Slide

  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.

    View Slide

  16. (codepen demo)

    View Slide

  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

    View Slide

  18. display: block;
    Breaks out of a line of text if you use it in a line of text.

    View Slide

  19. (codepen demo)

    View Slide

  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.

    View Slide

  21. (codepen demo)

    View Slide

  22. At this point in the old days, we had to resort to things like
    display: inline-block;
    float: left;
    or display: table;
    to make our boxes lay out in a way that look liked an application rather than a
    document
    No more!

    View Slide

  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...

    View Slide

  24. Flex container
    (parent)
    Flex item
    (child)
    ...they control the layout of items they contain!
    Grid container
    (parent)
    Grid item
    (child)

    View Slide

  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.

    View Slide

  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

    View Slide

  27. display: grid;
    A very strict parent. Top-down control of child behaviour.
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;

    View Slide

  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

    View Slide

  29. (codepen demo)

    View Slide

  30. position

    View Slide

  31. Doesn't actually set position.
    Sets position "mode" under which other "positioning" properties
    top bottom left right
    will operate

    View Slide

  32. position: static;
    (the default)
    Not much happens. Positioning properties have no effect.

    View Slide

  33. (codepen demo)

    View Slide

  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;

    View Slide

  35. position: relative;
    2: Establish a new positioning context
    ...wtf is a positioning context?
    position: relative;

    View Slide

  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 )
    To position things relative to the box's boundaries,
    you need to establish a new positioning context.
    Make the walls solid. Reset (0,0).

    View Slide

  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;

    View Slide

  38. (codepen demo)

    View Slide

  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;

    View Slide

  40. position: absolute;
    2: Establish a new positioning context
    Resets (0,0) for child elements, exactly like position: relative does
    position: relative;

    View Slide

  41. position: absolute;
    3: Take the element out of the document flow
    Adjacent elements will act like it's not there!
    position: relative;

    View Slide

  42. (codepen demo)

    View Slide

  43. X (pixels)
    Y (pixels)
    That gives us enough tools to arrange boxes in 2D space to create this layout.
    (Does it? Questions?)

    View Slide

  44. X (pixels)
    Y (pixels)
    What about our weirdo third half-dimension?
    How do we arrange boxes along our z axis?
    Z (not pixels?!)

    View Slide

  45. z-index

    View Slide

  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.

    View Slide

  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

    View Slide

  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;

    View Slide

  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)

    View Slide

  50. Done!

    View Slide