TIL 15. Position 과 z-index

(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: 부모요소로부터 상속받음.

참고자료

• https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
• https://www.w3.org/TR/CSS2/visudet.html#containing-block-details
• https://www.w3schools.com/css/css_positioning.asp
• https://www.w3schools.com/cssref/pr_pos_z-index.asp