[CSS] Positioned Layout

flow 레이아웃이 요소들 간 겹치지 않도록 했다면 포지션 레이아웃에서는 가능하다.

포지션 레이아웃은 다음과 같은 종류가 있다.

• static (그냥 디폴트)
• relative
• absolute
• fixed
• sticky

position relative

1. 특정 자식을 제한한다
2. 추가적인 css 프로퍼티를 사용할 수 있다

포지션 레이아웃을 사용하면 top, left, right, bottom 속성 등을 사용할 수 있다. relative로 설정된 상태에서는 이런 값들은 원래의 자리 에서 상대적인 위치를 의미한다.

예를 들어 left: 10px은 오른쪽으로 요소를 10px만큼 이동시킨다. 하지만 요소 이동은 마진으로도 가능한데 왜 이걸 사용해야 할까?

마진과 포지션의 가장 큰 차이는, 포지션은 레이아웃에 영향을 주지 않는다는 점이다.

그리고 이 속성은 블록 요소와 인라인 요소 모두에 적용이 가능하다. 원래 인라인 요소는 대부분의 경우 위치를 이동시키기 어려운데, relative 포지션을 사용하면 움직일 수 있다.

position absolute

absolute 포지션은, 원래의 자연스러운 위치 흐름에서 벗어난 곳에 요소를 위치시키고 싶을 때 사용한다.

absolute를 사용하면 그 외의 다른 요소들은 마치 absolute가 적용된 요소가 존재하지 않는 것처럼 행동한다. 즉, 어떠한 장애물로도 여기지 않고 렌더링 아웃풋에 영향을 주지 않는다.

다른 요소들의 레이아웃에 영향을 주지 않고 유령처럼 떠있을 수 있기 때문에, 툴팁이나 모달, 드롭다운 등에 자주 쓰인다.

포지션 absolute에서 사용할 수 있는 흥미로운 트릭은, margin: auto와 함께 사용하면 요소를 완벽한 중앙에 위치시킬 수 있다는 것이다. 단 요소에는 fixed 높이와 너비가 정해져있어야 하고, top, right, bottom, right이 동일한 값을 가져야 한다.(대부분 0을 사용한다) margin auto는 원래 가로로만 정중앙에 위치시킬 수 있는데, absolute와 사용하면 왜인지 세로로도 정중앙에 위치시킬 수 있다.

absolute는 어디를 기준으로 top, left, right, left를 잡을까?

어떤 요소든 기준이 되는 조상이 있기 마련이다. 이를 컨테이너라고 하면, 보통은 이 컨테이너가 부모 요소가 된다.

하지만 position absolute의 경우 기준을 부모에 두지 않고, 포지션 레이아웃을 사용하고 있는 가장 가까운 조상을 컨테이너로 삼는다. (주의 - static은 포함안됨)

만약 조상 중에 포지션 레이아웃이 없다면 가장 최초의 컨테이너, 뷰포트를 기준으로 삼는다.

레이아웃 겹치기

레이아웃이 겹칠 때, 어떤 것이 위에 렌더링 되고 어떤 것이 밑에 렌더링 될까?

flow layout의 경우 DOM의 순서가 중요하다. negative margin을 통해 억지로 겹치게 했을 때 뒤에 있는 것이 더 위에 있는 것처럼 보인다.

하지만 flow layout은 레이아웃을 겹치고 싶을 때 사용하도록 설계되지는 않았다. background가 아닌 텍스트의 경우 위에 떠있는 것처럼 보이게 된다. 이럴 때에는 position layout을 쓰는게 낫다.

position layout과 position이 아닌 레이아웃이 겹치는 경우에는 position layout이 항상 위에 보인다.

만약 겹치는 레이아웃 모두 position이라면 DOM의 순서상 뒤에 있는 것이 위로 올라온다.

만약 이런 법칙들을 무시하고 원하는 대로 레이아웃이 겹치는 우선순위를 결정하고 싶다면 z-index 프로퍼티를 사용하면 된다. z-index는 z축의 값을 나타낸다. x가 가로 y가 세로축이라면 z는 앞과 뒤 축이다. 즉 z-index 값이 높을 수록 앞으로 나와있다고 생각하면 된다.

z-index war

z-index의 값은 간섭을 일으키기 쉽다. 예를 들어 툴팁, 다이얼로그, 스티키 헤더 등이 있을 때 우선순위를 주기 위해 z-index 값을 임의로 100, 999 이런 식으로 주면 예상하지 못한 동작을 할 수가 있다. 이런 식으로 임의의 값을 주는 것은 우아하지 못하다.

여기서 stacking context라는 것을 사용할 수 있다. stacking context는 요소들의 그룹을 만들어서 평탄화한다. 이 stacking context 그룹 내에 있는 요소의 z-index가 999여도 그룹 밖의 요소에 영향을 주지 않는다. 그룹 내의 z-index값은 그룹 내부의 형제들끼리에서 우선순위를 정할 때에만 사용되고, 그 그룹 전체의 z-index 값 또는 overlay 우선순위는 별도의 값으로 그룹의 형제들과 우선순위를 정할 때 사용된다.

stacking context를 만드는 법은

• isolation: isolate; 속성을 이용
• position을 fixed 또는 sticky 설정
• display가 flex 또는 grid 인 컨테이너의 자식에게 z-index 설정하기

등이 있다. stacking context를 만드는 더 많은 방법에 대해서는 MDN 을 참조하면 된다.

position fixed

position absolute와 매우 비슷하지만, absolute가 가장 가까운 position layout을 기준 컨테이너로 삼는 반면 fixed는 오로지 뷰포트만을 기준 컨테이너로 삼는다.

fixed의 가장 큰 장점은 스크롤에 영향을 받지 않는다는 것이다. 뷰포트를 기준으로 항상 특정한 위치에 고정시켜놓을 수 있다.

position absolute 처럼 margin auto 값을 주면 요소를 정중앙에 위치시킬 수 있다. 그래서 스크롤링 돼도 모달이 정중앙에 있길 원하는 경우에 적용하기 좋다.

position sticky

이 값은 스크롤링 할 때 해당 요소가 모서리에 붙어있는 효과를 준다. 보통 스티키 헤더에 많이 사용한다. 그리고 스티키는 자신이 속해있는 컨테이너 바깥으로는 나가지 않는다.

overflow

만약 height을 넘길만큼의 컨텍스트가 있다면, 브라우저는 그것을 바깥으로 흘려보냄으로써 해결한다. overflow의 기본값은 visible이며 이는 컨텐츠가 바깥으로 흘러나오는 것이 보인단 소리이다. flow 레이아웃에서는 overflow에서 흘러나온 컨텐츠까지는 흐름에 고려하지 않으므로, 만약 해당 요소 밑에 또 다른 요소가 위치하게 된다면 흘러나온 컨텐츠와 밑에 있는 요소가 겹쳐 보이게 된다.

overflow가 visible한 것을 방지하고 스크롤을 만드려면 scroll 값을 주면 된다. 또 overflow 설정은 x축과 y축을 각각 설정할 수도 있지만 overflow: auto를 쓰는게 일반적으로 나은 선택이다. 왜냐하면 이 값은 스크롤이 필요할 때에만 스크롤을 보여주기 때문이다. scroll과 같은 값들은 실제로 스크롤이 필요없어도 스크롤바가 보이게 된다.

만약 컨테이너에 넘치는 컨텐츠를 아예 안보여주고 싶으면 hidden 값을 주면 된다. 이는 텍스트 길이가 너무 길어서 ellipsis를 주고 싶은 경우에 사용하거나, 컨테이너 edge쪽에 요소를 예쁘게 배치하고 싶을 때 사용하기도 한다.

참고로 overflow를 포지션 absolute에 적용하고 싶다면 overflow가 적용된 컨테이너 컴포넌트를 position relative로 설정해줘야 한다.