CSS position

각 요소의 배치 방법

CSS에서 까다로운 부분중 하나이며 매우 중요!

position: static(기본값)

기본적인 요소의 배치순서에 따라 배치

top, bottom, left, right 를 사용 할 경우 무시

position: relative(상대위치)

기본 위치(static 기준)으로

top, bottom, left, right 를 사용해 이동

position: fixed(고정위치)

부모 요소에 관계없이 브라우저 표시영역을 기준으로

top, bottom, left, right 를 사용해 이동

스크롤을 이동해도 항상 같은 위치에 고정

보통 상단에 고정된 네비바나,

쇼핑몰같은 세로로 긴 페이지시 우측하단에 고정된 최상단 이동 버튼을 만들 때 사용한다.

position: absolute(절대위치)

가장 가까이 있는 부모 요소(static 제외)를 기준으로 top, bottom, left, right 만큼 이동한다.

즉 relative, absolute, fixed 속성이 선언되어 있는 부모 요소를 기준으로 위치가 결정된다.

만일 부모 요소가 static인 경우, body를 기준으로 하여 좌표 속성대로 위치하게 된다.

끝으로

활용할 수 있는 곳은 일반적으로 박스 위에 다른 박스를 위치시키고 싶을 때,

부모 요소에 relative, 자식 요소에 absolute를 주고 left, top으로 이동시키면 된다.

마찬가지로 직접 해보면서 익히는것이 가장 좋다.

4/159

'개발 > CSS' 카테고리의 다른 글

CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09

+ Recent posts