absolute

relative

absolute

"> 08-02_absolute

absolute

relative

absolute

"> 08-02_absolute

absolute

relative

absolute

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08-02_absolute</title>
<!--
	# absolute 속성은 부모에게 static 이외의 position 속성이 지정되어 있을 경우에만 부모를 기준으로 위치.
-->
<style type="text/css">
* { margin: 0; padding: 0; }

div {
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

.parent { margin: 50px; background-color: gray; }

.r_box {
	background-color: red;
	position: relative;
	top: 20px;
	left: 50px;
}

.a_box {
	background-color: blue;
	position: absolute;
	top: 50px;
	left: 100px;
}

</style>
</head>
<body>
	<h1>absolute</h1>
	<br>
	<div class="parent">
		<div class="a_box">absolute</div>
	</div>
	<div class="parent">
		<div class="r_box">relative
			<div class="a_box">absolute</div>
		</div>
	</div>
</body>
</html>