반응형
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의 레벨값을 가진 엘리먼트들은 나중에 로드되는게 제일 위로 보인다
반응형
'디자인 > CSS' 카테고리의 다른 글
| CSS - 가상클래스(pseudo) (0) | 2019.03.02 |
|---|---|
| CSS - display 속성 (0) | 2019.03.02 |
| CSS - 선택자(selector) (0) | 2019.03.02 |
| CSS - @media 쿼리 (0) | 2019.03.02 |
| CSS - 애니메이션 @keyframes (0) | 2019.03.02 |