Position in CSS - Core CSS Mastery 5.2
Support This Channel
======================
Please like and subscribe, it means a lot!
Please buy me a coffee so I can continue to make content.
https://buymeacoffee.com/zenshell
My cybersec and webdev training site
https://www.zenshell.ninja
Join our Discord
/ discord
We take a look at the position property in CSS.
The position property in CSS allows you to control the positioning of an element on a web page. It's a powerful tool that lets you place elements exactly where you want them, relative to their containing element or the viewport.
The position property can take several values:
static: This is the default value. Elements with position: static; are positioned according to the normal flow of the document.
relative: Elements with position: relative; are positioned relative to their normal position in the document flow. You can then use the top, right, bottom, and left properties to offset the element from its normal position.
absolute: Elements with position: absolute; are positioned relative to their nearest positioned ancestor. If there is no such ancestor, they are positioned relative to the initial containing block (usually the viewport).
fixed: Elements with position: fixed; are positioned relative to the viewport, meaning they will always stay in the same place even as the user scrolls the page.
sticky: Elements with position: sticky; are positioned based on the user's scroll position. They act like relative positioning until the element reaches a specified point, then it "sticks" in place.