Layout

Position

• https://developer.mozilla.org/en-US/docs/Web/CSS/position

Where the element appear relative to its container or viewport.

• Relative: Move element relative to its normal position.
• Absolute: Move element to nearest parent.
• Fixed: Stick the element to the viewport.
• Sticky: Behave normally until you scroll.

Display

• https://developer.mozilla.org/en-US/docs/Web/CSS/display

• Block: Take full width.

• Inline: Behave like text, which mean it doesn't have width or height.

• Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout

• Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout