position
html 문서 상에서 요소의 배치를 결정하는 속성이다.
position:absolute
지정한 값을 절대적 위치로 배치
position:relative
지정한 값을 현재 위치를 기준으로 상대적 위치로 배치
position:fixed
화면을 스크롤과 상관없이 특정 위치에 고정 배치
ex_absolute
{position:absolute;top:20px;left:20px;}
해당 요소가 어디에 위치해 있든간에 위치값을
top 20px, left:20px의 절대적 좌표값으로 이동시킨다.
ex_relative
{position:relative;top:20px;left:20px;}
해당 요소의 현재 위치를 기준으로 위치값을
top 20px, left:20px 만큼 이동시킨다.
추가로
부모 요소를 position:relative로 설정한 후,
자손 요소를 position:absolute 설정하면
자손 요소의 절대적 위치의 기준은 부모 요소가 된다.
쉽게 설명하면
부모 요소가 {position:relative;top:20px;left:20px}에 위치해 있는 상태에서
자손 요소의 포지션을 {position:absolute;top:0px;left:0px}로 설정한다면
자손 요소의 위치는 top:20px;left:20px로 설정되는 것이다.
해당예재랑 같이 이해하면 조을 것 같다
-전체 영역을 div로 잡고 position:relative로 설정,
-안의 박스들은 position:absolute로 설정하여 배치.(절대 위치의 기준은 div영역이 되는 것.)
section{width:800px;height:400px;position:relative;border:1px solid red;}
div{width:200px;height:100px;position:absolute;}
#box1{background-color:black;color:aliceblue;left:300px;top:0;}
#box2{background-color:green;width:100px;left:200px;top:100px;}
#box3{background-color:blue;left:300px;top:100px;}
#box4{background-color:yellow;width:100px;left:500px;top:100px;}
#box5{background-color:pink;left:100px;top:200px;}
#box6{background-color:green;left:500px;top:200px;}
#box7{background-color:blue;left:0px;bottom:0px;}
#box8{background-color:yellow;left:200px;bottom:0px;}
#box9{background-color:skyblue;left:400px;bottom:0px;}
#box10{background-color:darkcyan;left:600px;bottom:0px;}
</style>
</head>
<body>
<section>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
<div id="box5">box5</div>
<div id="box6">box6</div>
<div id="box7">box7</div>
<div id="box8">box8</div>
<div id="box9">box9</div>
<div id="box10">box10</div>
</section>
</body>
</html>
