Containing Block(CB), Position, zIndex
(position: fixed를 설정한)A레이아웃 아래를 지나가야할 (position: relative를 설정한) B레이아웃이 아무렇지 않게 위를 지나갈때의 그 당황스러움이란,,,
1. Containing Block(CB)
1-1 의미
특정한 가상의 영역을 가리키는데, 이는 어떤 엘리먼트의 ‘자식 엘리먼트들이 위치나 크기 등을 결정지을 때 기준으로 사용할 참고 지표’ 가 된다. (쉽게 이해하자면, 부모 엘리먼트를 의미한다). 모든 DOM 엘리먼트는 생성과 동시에 자신과 똑같이 생긴 영역을 만들고그 걸 자신의 CB 라고 부른다. 자식 엘리먼트의 위치나 너비, 높이와 같은 값들은 부모 엘리먼트를 직접 참조하는게 아니라 부모 엘리먼트의 CB 를 참조하게 된다 . 그래서 엘리먼트와 CB 의 관계는 대략 다음과 같다고 볼 수 있다.
1-2 CB와 position의 상관관계
position 의 종류마다 참고하고 있는 CB 는 달라질 수 있다. — fixed 는 항상 viewport 의 CB 를 참조한다. — absolute 는 부모 엘리먼트부터 최상위 root 엘리먼트 중 현재 엘리먼트에서 position 이 static 이 아닌 가장 가까운 엘리먼트의 CB 를 참조한다. — relative 는 현재 엘리먼트가 속한 DOM flow 의 흐름에서, 자기 자신의 CB 의 왼쪽 상단 꼭지점을 (0, 0) 좌표로 인식 . section — sticky 는 부모 엘리먼트 중 scroll 이 있는 엘리먼트의 CB 를 참조함.
2. Position
2-1 의미
- : position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다.
position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.
참고> left 와 right 가 동시에 선언이 되어 있다면 left 가 이긴다.
top 과 bottom 이 동시에 선언이 되어 있다면 top 이 이긴다.
대신, 부모 엘리먼트의 direction 이라는 속성이 rtl, 즉 right-to-left 로 선언이 되어 있다면
위의 우선순위는 역전된다.
2-2 속성
브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
1) static(기본값) :위치를 지정하지 않을 때 사용한다.
2) relative : 위치를 계산할때 이전요소(static)의 원래 위치부터 계산한다.
주로 부모(parent)요소에 사용.
3) absolute : 원래 위치와 상관없이 위치를 지정할 수 있다.
단, 가장 가까운 상위 요소를 기준(relative)으로 위치가 결정 된다.
자식요소에 사용.
4) fixed : 원래 위치와 상관없이 위치를 지정할 수 있다.
상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
3. z-index
3-1 의미
어느 객체가 앞으로 나오고 뒤로 갈지, 배치 순서를 결정하는 속성이다. z-index는 position속성또는 flex가 적용된 요소에서만 작동한다. ex. position: absolute; position: relative; position: fixed; position: sticky; ex. display: flex;
3-2
z-index:auto; z-index:4; z-index:initial;
1) auto: default(기본값). z-index를 지정하지 않은것과 같음.
2) number: 배치 순서를 결정. 숫자가 낮을 수록 뒤에 배치되고 높을수록 앞으로 나옴.
음수(-)도 가능.
3) initial: 기본값으로 설정함
4) inherit: 부모요소로부터 상속받음.
참고자료