position을 사용하기 위해서는 먼저 해당 요소를 배치할 기준이 필요하다.
- static: 기본값 (요소는 기본적으로 배치를 할 수 없는 상태_기준 없음)
- relative: 요소 자기 자신을 기준
- absolute: 위치 상 부모 요소를 기준
- fixed: 뷰포트(브라우저)를 기준
- sticky: 스크롤 영역 기준
position: relative;
position: relative;
위의 2번 박스에 relative 값을 명시해도 relative 값을 명시하기 전과 똑같은 결과를 출력하는데....
이렇게 위치 값인 속성 left와 top을 부여하면 원래 있던 자리에서 왼쪽으로부터 200px만큼, 위로부터 30px씩 이동한 '2'번 박스를 볼 수 있다.
📢하지만
'1'번 박스와 '3'번 박스의 사이에 아직 '2'번 박스의 공간이 남아있다.
1번과 3번이 쌓인 구조가 아닌 공중에 붕 떠있는 구조로 되어 있기 때문에 이것은 비정상적인 출력결과로 간주한다. 정상적인 출력 구조라면 1번과 3번 사이에는 공간이 없어야 한다.
따라서
옮겨진 2번 박스는 허상이고 실제로는 옮기기 전의, 원래의 위치에 있다.
결과적으로
relative 값을 활용한 배치는 실제로 잘 사용되지 않는다고 한다.
그럼 언제 사용될까?
absolute 값을 가지는 하위 요소가 구조 상의 부모 요소에 위치 상의 부모 요소가 될 수 있도록 position: relative; 값을 부여하는 용도로 쓰인다.
무슨 말이야....?
position: absolute;의 개념을 알면 더 쉽게 이해할 수 있다.
반대로📢
position: relative;가 명시되어 있다면, 그 요소의 자식, 후손 요소에 position: absolute;를 통해서 무엇인가가 배치되고 있다고 유추할 수 있다.**
Position: absolute;
position: absolute;
2번 박스에 absolute
값을 부여하니 2번 박스가 공중으로 붕 뜨면서 1번 박스와 3번 박스가 붙어있는 것을 볼 수 있다.
이는 2번 박스 자신이 배치될 위치를 부모 요소를 기준으로 지정하였기 때문에 더 이상 1번 박스와 3번 박스와의 상호작용을 하지 않는다.
결과적으로
position: absolute;
를 부여하면 속성이 부여된 요소는 주변 요소와의 상호 작용이 무너지며 부모 요소를 기준으로 배치된다.
이때 position:relative
값을 부모 요소에 명시한다.
파란색 박스는 박스 1,2,3의 위치 상 부모요소이다.
즉, 2번 박스에 작성된 아래의 코드로 인해position: absolute; top: 30px; left: 30px;
"2번 박스는 relative가 선언된 요소를 기준으로 위로부터 30px, 왼쪽으로부터 30px 배치된다."
파란 박스에relative
값을 명시하여position: relative;
2번 박스가 배치될 기준을 지정한다.
박스 1,2,3에게 파란 박스는 부모 요소, 보라 박스는 상위 요소이다.
2번 박스에 position: absolute;
값이 부여됐다.
브라우저의 행동
2번 박스를 relative
값이 있는 요소를 기준으로 배치해야 하니깐 바로 위의 부모 요소부터 relative
값이 있는지 확인한다.
파란 박스에는 position: static;
즉, '기준 없음'이 설정되어 있다. relative
가 아니니 브라우저는 그 위의 부모 요소 즉, 상위 요소를 해석하려고 시도한다. 이때 보라색 박스를 확인하니 position:relative
값이 부여되어 있는 것을 확인한다.
결과적으로 2번 박스는 상위 요소인 보라색 박스를 기준으로 아래로부터 30px, 오른쪽으로부터 30px의 위치에 배치된다.
만약 부모 요소, 조상 요소 모두 position: static; 값을 가지고 있다면, 부모로 올라가고 또 올라갔는데 HTML까지 올라갔는데 기준이 안된다고 판단할 때, 이는 뷰포트를 기준으로 아이템을 배치하게 된다.
💡
특정 요소에 position: absolute;를 통해서 배치를 하기 시작했다면, 그 해당하는 요소의 구조 상의 부모 요소에 position: relative;값이 있어야 한다.
Position: fixed;
부모나 상위 요소에 아무리 position: relative;
값이 있어도 애초에 뷰포트를 기준으로 배치된다.
position: relative;
값이 있기 때문에 2번 박스는 1,3번 박스와 더 이상 상호작용 하지 않는다.💡 상단 바를 적용할 때 사용한다. 스크롤을 내려도 해당 요소는 화면의 고정된 위치에 있음
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static제외)
⇒ position: absolute; position: fixed; 가 있는 경우
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
⇒ 요소 모두 position의 속성을 가지고 있을 경우 z-index 속성 숫자 값을 확인한다
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
⇒ HTML에서 나중에 작성될 수록 위에, 사용자의 눈에 더 가깝게 쌓인다.
요소 쌓임 정도를 지정
auto: 부모 요소와 동일한 쌓임 정도
숫자: 숫자가 높을 수록 위에 쌓임. 음수도 사용 가능하지만 일반 요소보다 더 뒤에 쓰고 싶을 때 최대 -1 정도를 사용한다. -2부터는 잘 사용하지 않는다.
position과 같이 사용하는 CSS 속성들(양수 음수 모두 사용할 수 있다)
요소의 각 방향별 거리 지정
auto: 브라우저가 계산. 0이라고 생각하면 됨
단위: px, em, rem 등 단위로 지정
position
속성의 값으로 absolute
fixed
가 지정된 요소는, display 속성이 block으로 변경된다