Three Interesting Things I learned from CSS

  1. The first thing I learned in CSS is using a linked stylesheet or using the style section of the HTML document
  2. The second coolest thing I learned in CSS is -webkit. When I was searching for how to make my text more clear in a very colorful background I learned about -webkit and saw the cool options it had.
  3. The third thing I learned is the difference between CSS and HTML. That may sound obvious but learning how to see how the different files/languages interact with each other is something I guess I am slowly getting but nevertheless still getting. :D

Positions: Static; Relative; Fixed; Relative; Absolute; Sticky

Taken From W3 Schools (had a hard time getting positioning)

position: static;

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This div element has position: static;

position: relative;

An element with position: relative; is positioned relative to its normal position:

This div element has position: relative;

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:

This div element has position: fixed;

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):

This div element has position: relative;
This div element has position: absolute;

position: sticky;

Try to scroll inside this frame to understand how sticky positioning works.

I am sticky!

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.