CSS 포지션(Position)

position 속성 - 배치 방법 지정하기

블록을 박스의 위치기준으로 배치하는 기술로서, 주로 컨텐츠를 서로 겹치게 배열하거나 마크업 순서와 디자인상의 순서가 다를 경우의 표현에 매우 유용합니다.

쓸 수 있는 값	풀이
static	요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태를 말하며 positon을 생략하면 그게 바로 static.
reltative	relative로 지정된 요소는 left와 top 속성으로 이동을 할 수 있으며, absolute로 지정된 요소의 부모 요소 역할을 할 수도 있다. = 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다
absolute	absolute로 지정된 요소는 다른 요소와 겹칠 수 있고 left와 top 속성을 이용하여 부모 박스를 기준으로 위치를 정해주어야 한다. =원하는 위치를 지정해 배치,위치조절
fixed	요소의 위치를 화면 기준으로 지정해주며, 구형 브라우저에서는 표현되지 않는다.(ex퀵메뉴)
z-index	요소 쌓는 순서 정하기 - 숫자가 클수록 위에서 보임(10단위,100단위),레이어개념

※ position은 absolute와 relative가 중요합니다. 다른 요소와 겹쳐져야 하거나 또는 제이쿼리로 애니메이션 해여 한다면 absolute여야 합니다. 또한, absolulte 요소의 부모 박스 역할을 하거나 그냥 살짝 이동만 할 거라면 relative를 사용합니다. 

- absolute와fixed일 경우에는 display 신경 안써도 됨 ->크기를 차지한다. 

- absolute를 사용할 경우에는 바로위 부모에게 반드시 relative또는 absolute를 주어야 한다.

- absolute는 크기가 자동으로 늘어나지 않는다.(늘어날 확률이 낮을때 사용)

- 부모는 크기 를 가지고 있어야 한다.

- relative는 형을기준으로 움직임(부모x) 크기가 자동으로 늘어남

 

 

 

※ positioin:relative와 float:left;는 함게 쓸 수 있습니다. 둘 모두 주변과 어울리게 해주죠. 그러나 position:absolute;와 float:left;는 함께 쓸 수 없습니다. absolute는 어울림의 반대 즉, 따로 떨어져 나온 독립된 요소이기 때문에 부모 박스가 자동으로 감싸주지 않습니다. 또한, float:left와 clear:both도 함께 쓰지 마십시오. float하는 명령과 해제하는 명령을 둘 다 쓰면 누구 말을 들을가요? 당연히 float명령이 오류를 일으키게 될 테니 쓰지 않는 것이 맞습니다.