반응형
CSS position
각 요소의 배치 방법
CSS에서 까다로운 부분중 하나이며 매우 중요함
position: static(기본값)
기본적인 요소의 배치순서에 따라 배치
top, bottom, left, right 를 사용 할 경우 무시
position: relative(상대위치)
기본 위치(static 기준)으로
top, bottom, left, right 를 사용해 이동
position: absolute(절대위치)
가장 가까이 있는 부모 요소(static 제외)를 기준으로 top, bottom, left, right 만큼 이동한다.
즉 relative, absolute, fixed 속성이 선언되어 있는 부모 요소를 기준으로 위치가 결정된다.
만일 부모 요소가 static인 경우, body를 기준으로 하여 좌표 속성대로 위치하게 된다.
position: fixed(고정위치)
부모 요소에 관계없이 브라우저 표시영역을 기준으로
top, bottom, left, right 를 사용해 이동
스크롤을 이동해도 항상 같은 위치에 고정
보통 상단에 고정된 네비게이션바나,
쇼핑몰같은 세로로 긴 페이지 우측하단에 고정된 최상단 이동 버튼을 만들 때 사용한다.
활용
박스 위에 다른 박스를 위치시키고 싶을 때,
부모 요소에 relative, 자식 요소에 absolute를 주고 left, top으로 이동시키면 된다.
직접 해보면서 익히는것이 가장 좋음.