position ( static, relative, absolute )

 position을 주제로 하는 것은 꽤나 까다로운 내용이다. position을 바꿔 주는 것만으로 해당 엘리먼트의 특성이 매우 변하기 때문이다.

 간단하게만 나열하면, 가장 큰 변경은 컨테이닝 블록이 변경 된다. top, left, botton, right 속성을 정의 할 수 있다. 새로운 쌓임맥락이 생성 된다.  꽤나 내용이 많고 응용 또한 많고 조심해서 써야 하는 주제이기 때문에 천천히 진행하고자 한다.

 모든 태그들의 기본적인 position은 static이라고 보면 된다. 아직까지 필자는 다른 포지션을 갖는 태그는 본적이 없다. 뭐 물론 셀렉트 박스의 열린 옵션들 스크롤이나 파일 오픈시의 시스템 다이얼로그는 예외로 하자 그것들은 DOM으로써 제어가 불가능 하니....

 위의 언급 중 컨테이닝 블록, 쌓임맥락을 처음 들어보는 분들도 있을 것이다. 간단하게만 설명 하겠다. 뭐 자세한 내용은 추후에 내용을 담을 수 있도록 노력해보겠다.

 특정 요소의 크기나 위치에 관여 하는 것은 무엇인가? 아주 추상적이기 때문에 다시 예를 들겠다. 특정 태그 A태그의 height: 100%를 지정하였을 때, 어떠한 요소 기준으로 100%로라는 것일까? 바로 상위 부모 일수도 있고 더 위의 부모 일수도 있고, 뷰포트일 가능성도 있다. 즉, 특정 태그 A의 크기 위치에 관여 하는 것이 컨테이닝 블록이다.

 쌓임 맥락은 무엇인가? A태그와 B태그가 겹치는 공간이 생기면 어떻게 할 것인가? 다들 z-index는 들어보았을 것이다. A태그와 B태그가 z-index가 같고 같은 부모를 공유 하고 있을때, 어떤 태그를 상위에 노출 시킬지에 결정 할 수 있다. 쌓임 맥락은 그 Z축을 개념화 한 것이다.

static

 위의 설명은 조금 새긴 했다. 가장 간단한 static을 설명 하자면, 그냥 컨텐츠의 일반 속성에 따라서 엘리먼트가 위치 한다. top, right, bottom, left 어떠한 요소도 사용이 불가능 하다.

relative

 static에서 결정된 위치 기반으로 top, right, bottom, left 요소를 사용 할 수 있다. position absolute의 컨테이닝 블록이 될 수 있다. 새로운 쌓임 맥락을 생성한다.

absolute

 absolute의 경우 컨테이닝 블록을 따져보아야 한다. 

1. position 속성 값이 static이 아닌(fixed, absolute, relative, sticky) 가장 가까운 조상

2. 특이상황에서의 조상

    1) transform이나 perspective (en-US) 속성이 none이 아님.

    2) will-change 속성이 transform이나 perspective임.

    3) filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)

    => filter가 none일 때에는 특정 조건이 뭔지 파악이 애매함.

    4) contain 속성이 paint임.

위의 조건에 따라 생긴 컨테이닝 블록을 기준으로 top, right, bottom, left 요소를 사용 할 수 있다. position absolute의 컨테이닝 블록이 될 수 있다. 새로운 쌓임 맥락을 생성한다.

 간단하게 위에 예시를 넣어 놓았지만, 자세하게 들여다 보지 않는 이상 잘 이해하기 힘들 수 도 있으니, 간단하게 말하자면 position: absolute인 경우 상위 태그에 position:relative를 설정해주는 것만으로 많은 문제를 해결 할 수 있다.

 또한 z-index를 사용시에 너무 많은 숫자를 대입 하게 되는 경우 position을 변경 해보는 것을 고려해보도록 하다.

애초에 할말도 많고 꽤나 설명하기도 복잡한 내용이다. 이번화에서 끝날 내용이 아니므로 더 작성할 가능성도 많다. 역시 css의 꽃은 display와 position.... 다음내용으로 fixed와 sticky를 잠깐 설명 하고 오히려 예제를 많이 올려보도록 하겠다.