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.
- Positioned element — A positioned element. For example, a positioned ancestor is an element whose
positionvalue is anything except…
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.
