CSS - 위치 속성

html요소를 원하는 위치에 배치할 수 있게 해주는 속성

 

position 속성 (좌표 속성으로 위치를 배치할 때 사용)

static : (기본값)

fixed : 좌표 속성에 의해서 요소를 배치하고 고정시킴

relative : (기본흐름에서 인식됨) → 기존 위치를 보장하면서 좌표 속성으로 배치

stickey : 기본 흐름 처럼 보이다가 top: 0 (설정값) 부터는 fixed처럼 보임

absolute : (절대적인 좌표 값으로 배치 → 기본흐름에서 벗어나 배치)

ex.

position: absolute;

left: 200px;

top: 0;

 

자식 요소의 position absolute 좌표 기준값은 부모요소가 됨

겹치는 경우 z-index 활용 (크면 클수록 높은 위치에 배치가 됨)

 

float속성 - none, left, right

왼쪽, 오른쪽 정렬, 마찬가지로 공중에 뜬 거 처럼 인식

 

float속성을 사용할 경우 clear속성 사용 필요 (float 속성의 영향력을 취소하는 용도)

→ 자식 요소에 float요소가 동일하게 적용되면 부모요소가 자식요소의 높이값을 이해하지 못함

→ 부모style에 overflow: auto; 적용 필요