The position property is used to specify a positioning scheme for an element. The default is "static" which puts the element in the "normal" flow.

In normal flow, inline boxes flow from left to right, wrapping to next line when needed.

<img src="logo.png"><img src="logo.png"><img src="logo.png">

In normal flow, block boxes flow from top to bottom, making a new line after every box.

<h1 style="border:1px solid black">Greetings</h1>
<p style="border:1px solid red">Hola, novato</p>
<div style="border:1px solid black"> Hey, dude>!</div>

Greetings

Hola, novato

The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.

<div style="position: relative; left: 80px; top: 20px;
  height: 100px; background-color: yellow;">
  Hello, hi!
</div>

The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).

<div style="position: absolute; top: 10px; right: 10px; 
  background-color: yellow">
 Up here
</div>

<div style="position: absolute; bottom: 10px; left:60px; 
  background-color: green">
 Down here
</div>

The z-index property specifies the stack order of positioned elements, in the case that they are overlapping. The element with highest z-index goes on top.

<div style="position: absolute; bottom: 10px; left:60px; 
  background-color: green"> Bottom </div>
<div style="position: absolute; bottom: 15px; left:60px; 
  background-color: green; z-index: 2;"> Top </div>