Dark Mode

Layout

Background Property

Case 1:

Case 2:

Positioning Elements by Floating

Case1:

Case2: 2 columns layout

Relative and Absolute Positioning of Elements

Case1: Relative Positioning

image-20200831105608106

 

image-20200831111533056

Case2: Absolute Positioning

Find the nearest relative/absolute positioning ancestor as offset basis

The html tag by default is set to relative positioning

In this case, the div tag isn't set with positioning type, so is the body tag, so the offset basis is actually the html tag.

image-20200831112241055

To Fix

Offsetting the relative container makes its content offset as well. (Flexibility)

Back to main page