.button {
position : static; / 기준이 x / default값 좌표설정x
position : relative; / 기준이 나 / : 원래위치부터 좌표변경
position : absolute; / 기준이 바로 위 부모 / : position:relative 가지고있는 부모에게 달려듬
position : fixed; / 기준이 브라우저 창 (viewport) / : 화면이 스크롤되어도 해당 버튼이 고정됨
}
top, left, bottom, right 라는 속성을 사용하면
요소의 상하좌우 위치를 변경할 수 있다.
하지만 이 좌표속성을 사용하려면 position 속성이 필요하다.
1. static
<style type="text/css">
div{
border:5px solid tomato;
margin:10px;
}
</style>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
#me{
left:100px;
top: 100px;
}이번에는 위의 예제에서
에 offset을 적용하면, 왼쪽으로부터 100px, 위쪽으로부터 100px 떨어진 위치로 이동하고 싶었는데, static이기 때문에 결과는 똑같다.
relative
<style type="text/css">
div{
border:5px solid tomato;
margin:10px;
}
</style>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
#me{
position: relative;
left:100px;
top: 100px;
} 
이번에는
에 offset이 적용된 것을 확인할 수 있다.
absolute
<style type="text/css">
#parent, #other{
border:5px solid tomato;
}
#me{
background-color: black;
color:white;
}
</style>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
#me{
background-color: black;
color:white;
position: absolute;
left:0px;
top:0px;
}
#parent{
position: relative;
}
#me{
background-color: black;
color:white;
position: absolute;
left:0px;
top:0px;
} 
#grand{
position: relative;
}
#parent{
position: relative;
}
#me{
background-color: black;
color:white;
position: absolute;
left:0px;
top:0px;
}
<div id="other">other</div>
<div id="grand">
<div id="parent">
parent
<div id="me">me</div>
</div>
</div> 
이 경우,
의 위치는
가 아니라,
의 시작점에 위치하게 된다.
4. fixed
#parent, #other{
border:5px solid tomato;
}
#me{
background-color: black;
color:white;
position: fixed;
left:0px;
top:0px;
}
#large{
height: 1000px;
background-color: tomato;
}
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me </div>
</div>
<div id="large">large</div>
