사실 이쪽은 아무도 안보고
나 혼자 미친X 마냥 떠드는 느낌인지라;; 좀 버려두고 있었는데
며칠 전 어떤분의 요청으로 간만에 포스팅 ㅋ


배치를 할때 플롯과 포지션이 있지만 대부분 앞에서 포스팅한 플롯(float)을 쓰고
포지션으로 배치하는 방법은 잘 쓰지 않는다.

하지만 이것도 가끔 쓸데가 있으니 알아두자.


포지션은 top, left, right, bottom 을 이용해서 위치를 지정하는데 사용법은 간단하다.

 


1. position:relative;

 

앞의 위치값을 기억하고 상대적인 위치를 지정한다.

 

아래는 100x100짜리 빨간 박스에 position:relative; 를 주고,

위에서 100픽셀, 왼쪽에서 100픽셀의 위치를 지정해 주었다.

이때, body에는 패딩20px을 주고

부모인 mother에 400x400짜리 두께가 5px인 검정테두리를 만들면 아래처럼 보여진다.

 

 

 

 

 

 

그럼 빨간박스는 body에 넣은 패딩값과 부모에 들어간 테두리5px에 영향을 받아
위쪽에서 125px, 왼쪽에서 125px인 지점에 위치한다.

물론 여기서 mother를 없애 버리면 body값 20px만 영향을 받는다.

이렇게 다른것들과 연관해서 상대적인 위치를 지정할 때 쓰이는게 position:relative; 이다

 

 

 

2. position:absolute;

 

그 자리에서 떠있기는 한데 플롯이랑 개념이 다르게
부모를 완전 무시하고 혼자만의 자유로운 자아를 가진다. 대기권밖으로 혼자 날라가 있는 느낌이랄까...

 

부모에 position:relative;를 사용하면 그 기준점을 찾는다.
아무런 기준점이 없으면 바디가 그 기준이 된다.
물론 기준점만 잡고 패딩이나 마진같은 그 외의 데이터의 영향은 전부 무시한다.

 

위에서 했던 빨간박스에 파란박스를 추가해서 position:absolute;를 주면
그 차이점을 확실히 알 수 있다.

 

 

 

 

 


그리고 아래는 부모에 position:relative;를 사용해서 기준점을 잡아주었을때의 변화

 

 

 

 


이건 보통 레이어로 띄우는 팝업같은데에 사용한다.

 

 

 

3. position:fixed;

 

아무 영향도 안받고 뷰(view)를 기준으로 항상 고정되어 있다.
메뉴, 로고, 따라다니는 장바구니, 플로팅광고 같은데 사용된다.

 

아래처럼 위에서 100px떨어진곳에 우측으로 붙여 녹색박스를 위치시켰을 때
브라우져의 창을 늘이거나 줄여도 항상 그 위치에 고정되어있다.

 

 

 


현재 블로그 오른쪽의 따라다니는 경고문이 바로 이 position:fixed;를 사용한 것이다.

 

 

포지션은 플롯보다 매우 쉽고 간편한 방법이긴 하지만

팝업같이 꼭 필요한데에만 사용하고 배치할때 가급적이면 사용하지 않는게 좋다.^^

 

 

 

 

 
 
 
 

 

Posted by Y&S