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
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!)
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!
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
Old World display values: display: inline; display: block; display: inline-block; display: none; All about how your box behaves relative to adjacent stuff
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.
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
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.
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!
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...
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.
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
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
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;
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).
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;
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;
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.
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
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)
bensmithett
ericgpks
tomokusaba
heguro
mthiroshi00excite
fendo181
javiergs
takahirom
okuramasafumi
punchdrunker
aanrii
masayaaoyama
10xinc
paulrobertlloyd
shpigford
ufuk
3n
phodgson
brianwarren
rocio
cromwellryan
eileencodes
speakerdeck
bryan
revolveconf