[CSS]자주쓰이는position 속성

position 속성은 뜻 그대로 위치를 담당하고 있습니다.

position 속성에서 주로 쓰이는 속성값은 absolute 와 relative 가 있습니다.

 

	absolute	fixed	relative	static
넓이	최소화	최소화	그대로 유지	그대로 유지
본질	유령화	유령의 집화
겹침혀용	가능	가능	불가능	불가능
이동	top, bottom, left, right 이용		-	-

먼저 아래와 같이 HTML과 스타일 시트를 작성했습니다.

 

See the Pen vYNRBMm by 김기태 (@kkt9102) on CodePen.

div class="top" 안에 div class="sub$" 란 상자를 만들어 주었습니다.

각각의 sub 박스들이 top 박스 안에 자리잡고 있는 것을 볼 수 있는데 

3번박스에 position: absolute 값을 주고  top 과 left 값을 각각 50px 을 준 후

변하는 모습을 보겠습니다.

 

See the Pen qBOoWyO by 김기태 (@kkt9102) on CodePen.

위의 모습처럼 3번 박스에 position:absolute 값을 주고 top 과 left 값을 50px 씩 주고 난 후 모습을 보면

원래 3번박스가 있던 자리에 4번과 5번박스가 자리를 잡았고 3번박스는 유령화가 되어 혼자 떠있는 모습을 볼 수 있습니다. 또한 3번박스의 이동거리는 부모인 .top 을 기준으로 움직인 것이 아닌 body를 기준으로 각각 50px씩 움직인 것을 볼 수 있습니다.

 

다음은 2번 박스에 position:relative , top 과 left값을 50px 주면 어떻게 변하는지 보겠습니다.

 

See the Pen dyYmyRV by 김기태 (@kkt9102) on CodePen.

position:relative 를 주었을 때는 absolute 값과 다른점을 볼 수 있는데

먼저 다른 속성들의 위치가 변하지 않고 2번박스만 움직이는 모습을 볼 수 있습니다.

그리고 움직이는 기준도 body의 기준이 아닌

부모의 기준에서 움직인 것을 확인 할 수 있습니다.