Sign in

Today we’re going to look at the css position property and learn the difference between: static, relative, absolute, fixed, and sticky positioning.

Terminology

First, let’s familiarize ourselves with some words and concepts used in this article.

  • Taken out of the normal flow — If an element is taken out of the normal flow of the document, then no space is created for the element in the page layout, and other elements will position themselves as if the element did not exist.

Preface

Exploring the intricacies of how: Babel, Webpack, or Hot Module Replacement work is out of scope for this article. I would recommend reading documentation available online if you are interested in learning more about how these tools work. Here are some links to get you started:

1 Getting Started

Let’s start by creating our folder structure and some files for our project. You can leave the files empty for now, we’ll update the content of the files throughout this article.

. +-- react-app +-- public | +-- index.html +-- src | +-- App.css | +-- App.jsx | +…

Muggle-born

Hi, my name is Jeremiah. I build things on the web for fun. I enjoy figuring how and why things work the way they do, and I try teaching others along the way.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store