CSS is crazy but also a bit misunderstood. Join me for a quick jaunt through CSS layout covering the importance of being "positioned" and how block formatting contexts and stacking contexts are keys to understanding CSS behaviour.
high • The viewport is the part of the canvas that is currently visible on your screen • On page load the viewport is placed at the 0,0 point on canvas • Codepen #1: http://cdpn.io/BIasu Canvas Viewport 0,0
document has tags which create elements • Elements defined inside the tags of another element are said to be children of that element • The browser makes a sort of "family tree" using this parent-child relationship - this is called the Document Object Model (or DOM) • The browser paints each element onto the canvas. ◦ Most elements create one box e.g. <p>, <div> ◦ Some create no box e.g. <head> ◦ some more than one e.g. <li> creates three boxes Codepen #2: http://cdpn.io/aHuJs
1. Take all the available width. 2. Take only as much height as you need for your contents. 3. Vertical margins between adjacent boxes collapse. Codepen #3: http://cdpn.io/KdCFJ
by browser unless you specify a different value • boxes are put on page according to "normal flow" rules • Codepen #4: http://cdpn.io/EAJma CSS Position Property
position is calculated according to normal flow rules • then adjust position based on values of top/bottom/left/right properties • all following boxes behave as if this box has not been moved • Codepen #5: http://cdpn.io/oxgLK CSS Position Property
position specified by top/bottom/left/right with respect to the boxes containing block (by default this is the <html> element) • all following boxes after it behave as if it this box doesn't exist • Codepen #6: http://cdpn.io/bgpdI CSS Position Property
special case of position: absolute that forces the containing block to always be the viewport • This is useful for making elements "stick" to parts of the viewport e.g. the sticky footer pattern • Codepen #7: http://cdpn.io/JHfEv CSS Position Property
1. Any of its children that have position set to absolute or fixed will be placed relative to it. 2. Its stacking can be changed with z-index Codepen #8: http://cdpn.io/GmEKF
position: relative; 2. Don't apply left|right|top|bottom // foo looks the same but has containing block // super powers .foo { position: relative; } To "position" an element without moving it:
Allows you to change the location of the box on the page with the left, right, top, bottom properties. 2. Makes the browser put the element into a special mode called "positioned". This a. make any children of this element with absolute or fixed position calculate their location relative to this element b. Allows us to use the z-index property to change how the browser stacks this element if it overlaps others.
absolute; • position: fixed; • display: inline-block; • display: table-cell; • display: table; • display: caption; • display: flex; • display: inline-flex; • overflow: hidden; • overflow: scroll; • overflow: auto; • <fieldset></fieldset> What do these things do? What do they have in common?
• display: inline-block | table-cell | table | caption | flex | inline-flex • overflow: hidden | scroll | auto • <fieldset></fieldset> do different things but have a common side-effect: They create a new "block formatting context" They create a block formatting context!
of block boxes occurs 2. a region where floats interact with each other 3. a region where adjacent vertical margins collapse • They are separate "fenced off" areas on the page. • Codepen #9: http: //cdpn.io/lIuCx • Codepen #10: http: //cdpn.io/bIhEz
makes a block formatting context (BFC) 2. Other BFCs can be created within the page by CSS properties like position, display, float, overflow and <fieldset>. 3. Within each BFC: a. floats interact with each other b. Vertical margins always collapse 4. Vertical margins do not collapse between BFCs 5. Floats do not interact with each other between BFCs Extra credit: One other effect of BFC: http://cdpn.io/hvsAu (extras #1)
unit i.e. using one of these: • float: left | right • position: absolute | fixed • display: inline-block | table-cell | table | caption | flex | inline-flex • overflow: hidden | scroll | auto • <fieldset></fieldset> but all these do something else too which means there is no one true grid system that can be used in every situation. Boo! Grid systems are a clever hack but ...
• Try some of these resources for other explanations of the concept: • http://www.yuiblog.com/blog/2010/05/19/css-101- block-formatting-contexts/ • http://www.w3.org/TR/CSS21/visuren.html#block- formatting • http://www.stubbornella. org/content/2009/07/23/overflow-a-secret-benefit/ • Play with the CodePens linked from this talk. BFCs: Find out more
positioned ◦ Remember positioning "disengages autopilot" ◦ Positioned elements can have their horizontal location changed with top, bottom, left, right ◦ Positioned elements can have their stacking location changed with z-index • Takes values that can be positive or negative integers • But what do those values represent? .header { z-index: 1; } .footer { z-index: -3; } .heinous-advert { z-index: 1000000000; } ?
the "height" above the canvas • it only works on positioned elements • larger z-index value is always placed higher in the stack • Codepen #12: http://cdpn.io/ABxtj The overly simple model looks like this:" 1 2 3 z axis x axis 0 Bad idea mmmkay?
of elements that move up and down the stacking order together • How are they created: ◦ The <html> element always creates a stacking context ◦ Applying z-index to an element creates a new stacking context for its children!
the "height" in the current stacking context not the document as whole • a stacking context is like a folder of layers • the root element <html> creates a stacking context • z-index only works on positioned elements • setting z-index on an element always creates a new stacking context for its children • Other CSS properties can create stacking contexts e.g. ◦ opacity < 1 ◦ position: fixed|sticky on chrome 22+ (web+mobile)
stacking contexts on a page - this is the first step to understanding the strange stacking behaviour. • Be careful when applying z-index to multiple elements at once - this can get out of control really quickly! A little z-index goes a long way!
• Fantastic introductions: ◦ http://learnlayout.com ◦ @wrumbsy talk at akl.js • worth following: ◦ @stubbornella ◦ @thierrykoblentz Thanks: Merrin for the monsters, Rabid Tech for the time and especially all the folks who took the time to teach so I could learn. Photo credits: • http://www.flickr.com/photos/upnorth/ • http://www.flickr.com/photos/fuyoh/
eoinkelly
1024jp
happymana
kohecchi
tutinoko
gam0022
afilina
notfounds
seike460
little_rubyist
snaka
10tera
harunatsujita
michaelherold
sonatard
lauravandoore
tammyeverts
keithpitt
trallard
garrettdimon
eileencodes
irinanazarova
iamctodd
keathley
