Position

hojoon·2022년 10월 18일
0

Css

목록 보기
1/2
post-thumbnail

Position

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. position 속성을 사용하면 html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있습니다.

static

요소를 일반적인 문서 흐름에 따라 배치합니다.

relative

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.

fixed

position의 속성값을 fixed로 주게 되면 요소가 일반적인 문서 흐름에서 완전히 제외된다. 그리고 top, right, bottom, left의 주어진 위치에 고정된다. 화면의 특정 위치에 고정되어 스크롤해도 계속 그 자리에 있다.

fixed 프로퍼티는 스크롤이 되어도 언제나 그자리를 고수하기 때문이다.

absolute를 사용하면 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다. (이런 특성을 부유 또는 부유 객체라 한다).

profile
프론트? 백? 초보 개발자의 기록 공간

0개의 댓글