<!DOCTYPE html>
<html lang="ko">
<head>
<title> 10.relative.html </title>
<link rel="stylesheet" href="reset.css">
<style>
/* 1.요소의 원래 위치가 남아있다 */
/*
#s1 ul{
background-color: yellow;
height: 300px;
width: 300px;
position: relative;
}
#s1 li:nth-child(1){background-color: red;
position: relative;
left: 50px;
top: 30px;}
#s1 li:nth-child(2){background-color: green;}
#s1 li:nth-child(3){background-color: blue;}
*/
/* 2. 부모의 위치를 지정 */
#s1 ul{
background-color: yellow;
height: 300px;
width: 300px;
position: relative;
left: 50px;
top: 50px;
}
#s1 li:nth-child(1){background-color: red;
position: relative;
--left: 50px;
top: 30px;
right: 50px;
}
#s1 li:nth-child(2){background-color: green;}
#s1 li:nth-child(3){background-color: blue;}
</style>
</head>
<body>
<!-- 상대적 위치 positon: relative -->
<section id="s1">
<h3>position: relative</h3>
<ul>
<li>손흥민</li>
<li>박지성</li>
<li>김연아</li>
</ul>
</section>
</body>
</html>