Fundamentals of Browser Rendering Css Overview PT 2
rendering - part 2
By Barak Drechsler
Recap from our previous
1. We discussed the browser rendering flow DOM + CSSOM => Render Tree => Layout =>
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)
We now have to see, how can we define how elements are aligned together.
Z-index and elements visibility order (stacking context).
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
A floating element is one where the computed value of float is not none.
Play Time - floats
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
5. Bootstrap grid system is float based.
1. Positioning allows you to move an element around the document.
2. We have 4 types of Positioning:
a. Static (default)
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.
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
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
- 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.
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
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
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
3rd Dimension, stacking context
Play Time - Stacking Context no
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
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...