Fundamentals of Browser Rendering Css Overview PT 2

The fundamentals
of browser
rendering - part 2
By Barak Drechsler

Recap from our previous
session...
1. We discussed the browser rendering flow DOM + CSSOM => Render Tree => Layout =>
paint.
2. Each element is box.
3. It size is defined by it box-model, either (content-box or border-box).
4. We have a different types of boxes which affect element behaviour (inline, block, inline-
block, flex, none)

Today's Agenda
We now have to see, how can we define how elements are aligned together.
Floats
Positioning
Collapsing Margins
Z-index and elements visibility order (stacking context).

Float
The float CSS property specifies that an element should be taken from the normal flow and
placed along the left or right side of its container, where text and inline elements will wrap
around it.
A floating element is one where the computed value of float is not none.
(MDN)

Play Time - floats
https://plnkr.co/edit/Bz4hS2E9e
mkbr3fvts16?p=preview
Floats Tricky Parts

Float - summary
1. When an element is floated it is taken out of the normal flow of the document. It is shifted
to the left or right until it touches the edge of its containing box or another floated element.
2. Float elements must be given explicit width, otherwise unexpected behavior could occur.
3. Non-positioned, non-floated, block-level elements act as if the floated element is not there.
4. To make parent of floats take it height, we must clear the floats, a trick could be adding
overflow: auto.
5. Bootstrap grid system is float based.

Positioning
1. Positioning allows you to move an element around the document.
2. We have 4 types of Positioning:
a. Static (default)
b. Relative
c. Absolute
d. Fixed

Static
The default value for all elements, represents the normal document flow.
Position related attributes have no effect (top, left, etc…)
Only usage is to override and reset other position values.
Isn’t affected by z-index.

Relative
This keyword lays out all elements as though the element were not positioned, and then adjust
the element's position, without changing layout (and thus leaving a gap for the element where it
would have been had it not been positioned (MDN)
- The Element starts where it should have been
- You can move it from it’s original position via (top, left, etc…)
- limits the scope of absolutely positioned child elements

Absolute
Do not leave space for the element. Instead, position it at a specified position relative to its
closest positioned ancestor if any, or otherwise relative to the initial containing block.
Absolutely positioned boxes can have margins, and they do not collapse with any other
margins. (MDN)
- The element is out of the browser flow, meaning it won’t be affected by other elements.
- Also it won’t affect other elements flow.
- Will be relative to it closest non static parent, or to the html tag itself if none found.

Fixed
Do not leave space for the element.
Instead, position it at a specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on every page. This value always
create a new stacking context (MDN).

Play Time - Positions
https://plnkr.co/edit/JosJySkjT7V
Ah4xuTp98?p=preview

Collapsing Margins
CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can
combine to form a single margin. Margins that combine this way are said to collapse, and the
resulting combined margin is called a collapsed margin. (W3C SPEC)
In short: when two topbottom margins touch each other they collapse
1. The higher margin is taken, and the smaller collapse to 0.
2. Negative and positive margins are added up rather than collapse.
3. Two Negative margins collapse, with the smaller one taken.

Play Time - Collapsing Margins
https://plnkr.co/edit/wvaBa6A7R
9snWJVxoIOP?p=preview

Stacking context is the three-dimensional conceptualization of HTML elements along an
imaginary z-axis relative to the user who is assumed to be facing the viewport or the webpage.
HTML elements occupy this space in priority order based on element attributes. (MDN)
Elements Order without z-index, are formed by the HTML hierarchy:
1. Last elements in HTML order will be displayed on top.
2. Positioned Elements have higher priority over static elements, which is strong then html
order.
3rd Dimension, stacking context

Play Time - Stacking Context no
z-index.
https://plnkr.co/edit/9ygOvS1BiB
qsyatxcCML?p=preview

Positioning and assigning a z-index value to an HTML element creates a stacking context, (as
does assigning non-full opacity).
Stacking contexts can be contained in other stacking contexts, and together create a hierarchy
of stacking contexts.
Each stacking context is completely independent from its siblings: only descendant elements are
considered when stacking is processed.
Each stacking context is self-contained: after the element's contents are stacked, the whole
element is considered in the stacking order of the parent stacking context.
Z-index & multi hierarchy stacks

Play Time - Stacking Contexts
https://plnkr.co/edit/tzW4NsFWA
Hu0TLjAWEO1?p=preview
MDN menu example

Stacking Context - Summary
1. Stacking Context, is the concept of how the browser renders elements in the 3rd dimension
(facing browser window).
2. By default context order is derived from html order (last element on top)
3. Default order gives priority for positioned elements over static elements.
4. Each context can host more contexts, each stacking context is self-contained.
5. New contexts are created by certain conditions
a. HTML root

Other Worth Knowing...
1. Css Transform
2. Css Pseudo Elements, check this
3. MDN, anytime you are not sure about
what's going on...

Fundamentals of Browser Rendering Css Overview PT 2

More Related Content

Similar to Fundamentals of Browser Rendering Css Overview PT 2 (20)

More from Barak Drechsler (6)

Recently uploaded (20)

Fundamentals of Browser Rendering Css Overview PT 2

Editor's Notes