[CSS] 포지션 속성(부모요소, 자식요소)

* CSS 포지션 속성

부모 요소 Relative

relative는 absolute로 배치된 자식 요소의 기준점을 설정하기 위해 사용된다.

자식 요소가 absolute로 설정된 경우, relative로 설정된 부모 요소를 기준으로 위치가 결정된다.

 

자식 요소  Absolute

absolute는 특정 위치에 요소를 배치해야 할 때 유용하다. 예를 들어, 팝업 메뉴, 툴팁, 모달 창 등을 화면의 특정 위치에 고정할 때 사용된다.

absolute로 설정되면 top, right, bottom, left 속성을 사용해 지정된 조상 요소를 기준으로 이동한다.

 

* 코드 예시

html

css

출력

 

부모요소 relative 적용 X

position: relative;를 제거.

 

출력

부모 요소가 브라우저로 적용되어 출력.

 

* 포지션 속성을 통해 자식요소 위치시키기

css

top: 0; left: 0; 설정

 

출력

 

 

css

bottom: 0; right; 0; 설정

 

출력

 

* 브라우저 크기에 관계없이 자동 수평/수직/중앙 정렬하기

css

출력

width와 height 크기가 달라져도 항상 중앙에 위치한다.