Alpha Channel

Alpha Channel is a component of rgb color

• color: rgb(255, 0, 0);
  • this will produce the color RED
• if we add the alpha channel,
  • color: rgba(255, 0, 0, 1);
• we still get the color RED but we can now control it's opacity
• by manipulating the a, or alpha component.
• The range for the Alpha Channel is from 0 to 1
  • with 0 being fully transparent,
  • and 1 being fully opaque.
• While Alpha Channel gives similar results as Opacity, it is different because
  • The Alpha Channel is a separate component in the rgb channel
  • and only effects the element that is being colored.

Opacity

Opacity gives similar result to Alpha Channel,

but it differs in two ways
• It is NOT a separate component of an element, but a completely separate property.
• and therefore, will not only affect the parent element, but also ALL other child elements under it.
• so you would set the desired color, and the set the opacity as a separate property
  • color: #ffbb66;
  • opacity: 1;
• The range for Opacity is still 0 to 1 just like the Alpha Channel.
• *note: you can omit a separate opacity property for "hex" colors simply by adding two more digits to the end of the hex color declaration.
  from the previous color example - color: #ffbb66;
  • color: #ffbb6600; | would be fully transparent
  • color: #ffbb66ff; | would be fully opaque

Positioning Property's

W3Schools CSS Positioning

MDN CSS Positioning

Static Positioning

• HTML elements are positioned static by default, so there is no need to declare them as position: static;.
• Static positioned elements are not affected by the top, bottom, left, and right properties.
• An element with position: static; is always positioned according to the normal flow of the page.

Relative Positioning

• An element with position: relative; is positioned relative to its normal position.
• Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
  • So if you have a div and set position: relative; and top: 100px;
  • you would move the div down from the top of it's original position, 100 pixels.
• Other content will not be adjusted to fit into any gap left by the element.

Fixed Positioning

• 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. The top, right, bottom, and left properties are used to position the element.
• A fixed element does not leave a gap in the page where it would normally have been located.

Absolute Positioning

• An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
• However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
• *Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Sticky Positioning

• An element with position: sticky; is positioned based on the user's scroll position.
• A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).