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

Overview

This course teaches beginners about the CSS position property, covering values such as absolute, relative, fixed, and sticky through examples. The course includes building a mini-project to demonstrate the application of these position property values. Students will learn about element overlap, z-index, accessibility with absolute positioning, and creating headers and footers with sticky positioning. The course also covers choosing between fixed and sticky footers, adding social buttons, and implementing smooth scrolling between sections. The teaching method includes video tutorials and hands-on coding exercises. This course is intended for individuals who are new to CSS and want to understand how to control the positioning of elements on a webpage.

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