I can't realize the difference!


#1

Relative Positioning (19/25)

HTML:

<!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>

CSS:

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

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

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

The thing is... When (#inner)'s "position" changes from "absolute" to "relative", there is NO difference! Is it supposed to be that way? Or does it depend on the (#outer)'s positioning?. ^_^


#2

I am a bit lazy to day, i wrote an answer for this problem quit a while back, you can find it here, i hope it explains why there is not shift in position in this exercise. If after you read it, you still do not understand, do ask, this is a very important part


#3

the simple answer to your question would be that it doesn't matter if you have position relative, absolute or even static. margin-left:200px; of inner will simple push the #inner block 200px to the right. That is it


#4

Yeah, well it's much more clear now! Thanks, Stetim.


#5

Everytime you open a bin it makes a copy, so don't hesitate to change a left to margin-left, or change the value of position. The original will be preserved, you can simple re-open it. Good to hear my explanation helped