아빠개발자의 노트

POSITION

HTML 문서의 엘리먼트 배치는 일단

순서대로 배치가된다. 그중

POSITION 속성이 있으면 POTSITION 의 값과는 상관없이

POSITION의 속성이 있는 엘리먼트들이 순서대로 배치가된다

하지만 POSITION이 없다면 POSITION속성이 잇는것보다 뒤에 배치가된다.

결론 : POSITON (속성X) < POSTION (속성 O) (순서대로)

​

속성

static : 기본값 (초기값으로 위치를 지정하지 않을때와 같다) left,top,bottom,right가 안먹힘.

realtive : static이 였을경우의 위치에서 계산이 시작됨 left,top,bottom,right 가 먹힘 (상대위치)

absolute : 문서의 원래 위치와 상관없이 위치를 지정 (절대위치),단 가까운 상위 요소를 기준으로 위치가 결정된다

              상위 요소가 없으면 위치는 html을 기준으로 설정 , (static는 제외)

fixed : 상위요소와 상관없이 위치 고정 , 스크롤을 내려도 따라다니는 팝업창이 바로 이걸로 하는거다.

​

​

​

Z-INDEX

POSITION 의 속성이 있는 것들 중에서 정렬이 된다

사지의 DIV #5는 POSTION 속성이 없어서 가장 하위로 내려간다

기본적으로 Z-INDEX의 값은 설정을 따로 안하면 0이 된다.

같은 Z-INDEX의 레벨값을 가진 엘리먼트들은 나중에 로드되는게 제일 위로 보인다

​