position 속성-static,relative,absolute,fixed

요즘 젤다의 전설이라는 게임을 합니다. 사당은 마그넷 캐치로 일단 잡히는건 다 옮기다보면 깨지는 경우가 많죠 (발그림 참조) css에서도 마그넷 캐치처럼 요소들의 위치를 내맘대로 조정할 수 있는 방법이 있습니다. 그것은 바로 position 속성을 이용하는 것입니다.

position은 아래의 속성들 중 하나로 지정해 줄 수 있습니다.
1.static
2.relative
3.absolute
4.sticky

1. static
   기본 position 속성입니다. 위치를 지정해 줄 수 없습니다. 일반적인 요소의 흐름에 따라 위치하게 됩니다.

2. relative
   일반적인 요소의 흐름에 따라 위치하지만, 자기 자신을 기준으로 top, right, bottom, left 값에 따라 위치를 지정해 줄 수 있습니다.

   position: relative;
   top: 40px; left: 40px;

   

3. absolute
   새로운 레이어 상에 위치하게 됩니다. 다른 요소는 absolute 요소를 신경쓰지 않고 배치됩니다. absolute 요소의 위치는 position이 static이 아닌 요소를 기준으로 정해집니다. position이 지정된 부모가 없을 경우 최상위 부모를 기준으로 위치가 지정 됩니다.

   position: absolute;
   top: 40px; left: 40px;

   

4. fixed
   fixed는 말그대로 요소를 내가원하는 위치에 fix할 때 사용합니다.

  position: fixed;
  top: 40px; left: 40px;