1. position:absolute
{
position:absolute;
}
/* absolute를 쓰면 원래 브라우저는 2차원의 공간인데 3차원의 공간이 생기게 됨. 즉, 두개 이상의 박스를 해당 공간에 겹쳐서 쓸 수 있음.
absolute는 left, right, top, bottom을 씀.*/
{
position:absolute;
left:50px;
}
/*예를 들어 left:50px을 주면 해당 박스만 왼쪽에서 50px 떨어지게 됨.*/
이런식으로 position:absolute:를 왼쪽으로 50px만큼주면 해당 박스만 오른쪽으로 떨어지고 새로운 한겹이 더 생긴것이므로 해당 공간이 비게 된것. 따라서 해당 공간에 원래 아래에 있어야 할 box2가 들어온 것이다.
/*주의할 것은 하위 엘리먼트에 엡솔루트를 줘도 위치 시작 기준이 상위 엘리먼트가 아니라 브라우저를 기준으로 움직인다는것임.
위 사진은
<body>
<div id="box1"><div id="box2"></div></div>
</body>
인 상태*/
2. position:relative
/* absolute는 브라우저 기준으로 위치를 움직였다면 relative는 상위 엘리먼트 위치를 기준으로 움직임.
기능은 같음*/
3. position:fixed
/*스크롤을 내려도 브라우저를 따라오게끔 한쪽에 붙어있음*/
#box3{
position: fixed;
top: 0;
right: 0;
width: 800px;
height: 800px;
background: yellow;
}
/*이렇게 쓰면 맨 오른쪽 맨위에 노란색 박스가 붙어있고 스크롤을 어떻게 움직여도 계속 붙어있음*/