Positioning a small, unique control, next to a very large one

1. What do you mean by relative positioning?
2. What type of positioning is used to fix the position of an element to a particular spot on the page regardless of scrolling?
3. What is absolute positioning?
4. What is a key difference between fixed positioning and absolute positioning?

What do you mean by 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. Other content will not be adjusted to fit into any gap left by the element.

What type of positioning is used to fix the position of an element to a particular spot on the page regardless of scrolling?

A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

What is absolute positioning?

Absolute positioning defines the position of a given bounding box from the top and left side margins of the web page. This not only allows objects to be placed in an exact location, it also allows objects to be placed one on top of another.

What is a key difference between fixed positioning and absolute positioning?

Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.