css position

position

태그의 위치 지정 방법의 유형(기준)을 설정

값에 따라 해당 태그의 위치 기준이 달라지게 됨

속성

static: 유형(기준) 없음 / 배치 불가능

relative: 요소 자신을 기준으로 배치

absolute: 위치 상 부모 요소를 기준으로 배치

fixe: 브라우저(뷰포트)를 기준으로 배치

sticky: 스크롤 영역 기준으로 배치

 

*자식한테 포지션을 전부 다 줘선 안됨

(왼쪽 줄의 자식한테는 포지션x)

 

 

position: relative;

요소 자신을 기준으로 배치(권장하지 않음)

 

 

position: absolute;

상위 태그를 기준으로 위치를 정함

태그의 실제 위치는 {top, right, bottom, left} 속성을 반드시 사용해야함

absolute 값을 사용해 위치를 지정할 때, 위치 기준이 도리 태그에 반드시 position 속성이 입력되어 있어야 함

absolute값이 적용된 태그는 형제관계에서 독립이 됨

만약 모든 태그가 absolute값을 가진다면 전체 문서의 높이값은 0이 됨

위치 상 부모(조상) 요소를 기준으로 배치

부모 요소에 position속성의 값이 없다면 조상(상위)요소로 올라가면서 위치 상 부모 요소를 찾아 기준

 

 

fixed

사용자의 브라우저 창을 기준으로 배치

 

 

sticky

스크롤 영역 기준으로 배치(IE지원불가)

 

 

position특징

요소 겹침(Overlapping elements)

position속성으로 배치된 요소는 다른 요소와 겹칠 수 있음

position속성으로 배치된 요소는 특정한 기준을 가지기 때문에 다른 요소들의 위치에 영향을 받지 않음

기준(속성 값)에 따라 겹치는 형태가 달라질 수 있음

 

 

요소 쌓임 순서(Stack order)

요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축)

1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)

2. position이 모두 존재한다면 z-index속성의 숫자 값이 높을수록 위에 쌓임

3. positino속성의 값이 있고, z-index속성의 숫자 값이 같다면, 'html'의 마지막 코드일수록 위에 쌓음

 

z-index

position이 지정된 요소의 '요소 쌓임'정도를 설정

(static을 제외한 position속성이 있을 경우만 사용 가능)

같은 자리에 겹쳐진 태그들 간의 앞뒤 순서값을 설정

주로 형제태그간의 순서를 비교하게 됨

값은 숫자로만 표기하고 더 높은 숫자값을 가진 태그가 화면 앞쪽으로 배치됨

position속성이 적용된 태그에만 사용 가능

z-index속성값을 마이너스로 작성할 경우 브라우저에서 클릭이 안됨

 

position 위치

top: 요소의 position 기준에 맞는 '위쪽'에서의 거리(위치)를 설정

bottom: 요소의 position 기준에 맞는 '아래쪽'에서의 거리(위치)를 설정

left: 요소의 position 기준에 맞는 '왼쪽'에서의 거리(위치)를 설정

right: 요소의 position 기준에 맞는 '오른쪽'에서의 거리(위치)를 설정

 

*자식한테 포지션을 전부 다 줘선 안됨

(왼쪽 줄의 자식한테는 포지션x)