CSS Position Property Tutorial for Beginners - Absolute, Relative, Fixed, Sticky

Overview

Learn the CSS position property in this comprehensive tutorial for beginners. Explore absolute, relative, fixed, and sticky positioning through practical examples and a mini-project. Discover how to apply different position values, handle element overlap with z-index, and create sticky headers and fixed social buttons. Gain insights into accessibility considerations and implement smooth scrolling between sections. Master the fundamentals of CSS positioning to enhance your web design skills and create more dynamic layouts.

Syllabus

Intro
Welcome
Setup & Starter Code Review
position: static
position: absolute
position: relative
position: fixed
Element overlap and z-index
position: sticky
Accessibility with position: absolute
Mini-project starter code
Section, header, footer styles
Headers with position: sticky
Choosing a fixed or sticky footer
Adding a fixed social button
Smooth scrolling between sections