Understanding CSS Position in 2 Minutes

TLDR; CSS Position Properties Cheat sheet

Static

<h1>Hey yo </h1>
<h1>Hellooo</h1>
Static Positioned elements

Relative

<div>  <h1 style="position: relative; left: 50px;">Hey yo</h1>  <h1>Hellooo</h1></div>
Relative positioned

Absolute

Absolute Positioned
<div>  <h1>Hey yo</h1>  <h1 style="position: absolute; top: 15px; left: 20px;">Hellooo</h1>  <h1>hehehe</h1></div>

Fixed

Hellooo will stick to the screen.
<div style="height: 2000px;">  <h1>Hey yo</h1>  <h1 style="position: fixed; top: 15px; left: 20px;">Hellooo</h1>  <h1>hehehe</h1></div>

Sticky

Sticky elements are positioned relative to their parent.
<div style="height: 150px; overflow-y: scroll;">  <h1>Hey yo</h1>  <h1 style="position: sticky; top: 15px; left: 20px;">Hellooo</h1>  <h1>hehehe</h1>  <h1>hohoho</h1>  <h1>hueuueue</h1></div>

--

--

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