The fundamentals of browser

rendering - part 2By 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/Bz4hS2E9emkbr3fvts16?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.

- It margins won’t collapse.

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/JosJySkjT7VAh4xuTp98?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 top\bottom 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.

4. Exceptions for collapsing margins are: absolute, inline-block, floats, cleared, non-visible overflow, flex layout.

Play Time - Collapsing Margins https://plnkr.co/edit/wvaBa6A7R9snWJVxoIOP?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/9ygOvS1BiBqsyatxcCML?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/tzW4NsFWAHu0TLjAWEO1?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

b. Z-INDEX for non static elements

c. Opacity which isn’t 1

d. Fixed Elements

e. And more...

Other Worth Knowing...

1. Css Transform

2. Css Pseudo Elements, check this

3. MDN, anytime you are not sure about what's going on...

Questions?