<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, tr, th,td{
border: 1px solid black;
border-collapse: collapse;
}
p{
border: 1px solid black;
width: 100px;
height: 80px;
}
#para1{
position: static;
}
#para2{
position: relative;
}
#para3{
position: relative;
left: 100px;
top: -50px;
}
#para4{
position: fixed;
right: 30px;
top: 30px;
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<table>
<tr>
<th>종류</th>
<th>설명</th>
</tr>
<tr>
<td>static</td>
<td>문서의 흐름에 맞춰 배치:기본값</td>
</tr>
<tr>
<td>relative</td>
<td>
static + 위칫값 지정 </td>
</tr>
<tr>
<td>fixed</td>
<td>브라우저 창을 기준으로 위치를 지정해 배치</td>
</tr>
<tr>
<td>absolute</td>
<td>relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치</td>
</tr>
</table>
<p id="para1">This is paragraph</p>
<p id="para2">This is paragraph</p>
<p id="para3">This is paragraph</p>
<p id="para4">This is paragraph</p>
</body>
</html>
