Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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!

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

display

Slide 13

Slide 13 text

display Old World vs New World

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

(codepen demo)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

(codepen demo)

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

(codepen demo)

Slide 22

Slide 22 text

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!

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

(codepen demo)

Slide 30

Slide 30 text

position

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

(codepen demo)

Slide 34

Slide 34 text

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;

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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;

Slide 38

Slide 38 text

(codepen demo)

Slide 39

Slide 39 text

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;

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

(codepen demo)

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

z-index

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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;

Slide 49

Slide 49 text

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)

Slide 50

Slide 50 text

Done!