[CSS] 요소 배치, 겹치기 : position

position 속성

• static (기본)
• relative (자신 기준)
• absolute (상위 요소 기준)
• fixed (뷰포트 기준)
• stickey (스크롤링 기준)

top, bottom, right, left : 위치 지정

 

대부분의 경우 postion과 top, bottom, right, left가 같이 사용됨.

여기에서는 relative와 absolute만 다루도록 하겠다. 나머지는 차차 내가 필요할 때 업데이트.

 

 

-relative

position: relative;

부모 요소와 상관 없이 요소 이동 가능.

위치는 요소의 원래 기본 위치에서 top, bottom, right, left의 방향으로 얼마나 벗어났는지 지정.

 

 

-abrolute

 

position: absolute;

position 속성이 'static(기본)이 아닌' 첫 번째 상위 요소를 기준으로 배치. 상위 요소가 전부 static일 경우 body요소를 기준으로. 이동하고자 하는 요소를 absolute로 지정할 경우 기준이 되는 상위 요소 또는 부모 요소는 보통 relative로 지정.