[CSS] position - static / relative / absolute

postion 

태그들의 위치를 결정하는 속성

 

top, bottom, left , right로 위치를 결정할 수있다.

 

주의할 점은 예를들어 top : 5px을 준다고 하면 위로 5px이동하는것이 아니라 아래로 5px이동하게된다.

left : 5px 또한 오른쪽 방향으로 5px이동한다.

 

각각의 방향을 기준으로 태그 안쪽 방향으로 이동하기 때문..! 바깥쪽으로 이동하게 하고 싶다면 -값을 써주면 된다.

 

1. position : static

기본값

모든 태그들은 처음에 static 상태이다.

위치를 지정하지 않을 때 사용한다.

2. position : relative

원래있던 자리를 기준으로 지정해준 top과 left만큼 이동한다.

 

원래있던 자리를 유지하면서 그 자리에서 상대적으로 지정한것만큼 이동하였기 때문에

inner2의 위치는 변함이 없다!

3. position : absolute

근접한 부모중에 static이 아닌 부모를 기준으로 지정한 값대로 옮겨간다.

static이 아닌 부모를 찾아 올라가다가 body까지 가게 되는것..!

 

원래있던 자리에서 빠져나오기 때문에 주변에 함께있던 아이템들의 재배치가 일어난다.

그래서 inner2의 위치가 변하게 된다!