Positioning: Difference between absolute and relative?


#1

What is actually the difference between absolute and relative positioning?

Given this HTML code:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<div id="outer"><div id="inner"></div></div>
	</body>
</html>

and this CSS code:

	height: 100px;
	width: 100px;
	border-radius: 5px;
	border: 2px solid black;
}

#inner {
	height: 75px;
	width: 75px;
	background-color: #547980;
	margin-left: 200px;
	position: /* absolute or relative */
}

#outer {
	height: 1500px;
	width: 150px;
	background-color: #45ADA8;
	position: absolute;
	margin-left: 100px;
}

somehow i can't see a difference when i change it from 'absolute' to 'relative'.
Nothing changes, so what is the difference between those two ?


#2

writing such explanations take time, please read one i wrote a while back:

if you have any questions after this, i will answer


#3

okay thx

so since we move the element using margin, we see the same result using either absolute or relative.
Correct me if i am wrong but if i want to see a difference between 'relative' and 'absolute' i'd need to use 'top', 'right', 'bottom', 'left' to position the element and change it's 'position' value after.

But since relative positions based on it's default position what is the difference between it and static? just that you can use 'top', 'bottom', 'left', 'right' to move it or is there more?


#4
  1. static
    This keyword lets the element use the normal behavior. That is, it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
  2. relative
    This keyword lays out all elements as though the element were not positioned, and then adjusts the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

source

Margin will just push elements around. It will change the layout. Using top will not change the layout.