사실 이건 함정이라고 보기에도 뭐한게, 그냥 내가 공부를 띄엄띄엄 한 탓이다.

 

CSS의 position 속성은 static, fixed, relative, absolute, sticky를 가질 수 있는데, absolute 자체의 단어가 가진 뜻 때문에 2시간을 홀라당 날린게 하도 분해서 좀 정리해봐야겠다 싶다.

 

position: absolute;

의외로 많은 블로그에서 이 속성값을 "절대위치" 라고 이야기한다. 단어 뜻만 보면 틀린 얘기는 아니다. 하지만 이 "절대"가 과연 진짜 "절대"인지는 조금 더 살펴 볼 필요가 있다.

 

모질라 문서에 따르면 absolute에 대해 다음과 같이 설명하고 있다.

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

일단 position이 absolute를 먹으면 해당 요소는 Document Flow라는 시스템에서 제외된다. Document Flow에 대해서는 나중에 따로 다루겠지만, 일반적인 상황에서 HTML 요소가 배치되는 방법이라고 생각하면 된다. 그렇기 때문에 해당 요소는 문서 안에서 어떠한 공간도 차지하지 않게 되며, top, right, bottom, left등의 속성을 이용해서 위치를 마음대로 지정할 수 있다.

 

그러나 중요한건 볼드처리한 부분인데 가장 가까운 위치가 지정된(positioned) 조상 요소, 혹은 최초 Containing Block 기준(HTML에서라면 보통 body)로 relative 처럼 처리된다는 얘기다.

 

여기서 "위치가 지정된 조상요소"의 "위치가 지정된" 이라는 의미는, position속성의 값이 static이 아니라는 의미이다. 따라서, 다음과 같은 예시들에서 #absolute는 #ancestor에 대해 relative인것처럼 동작한다.

<body>
    <div id="ancestor2"> <!-- position:relative -->
        <div>
            <div id="ancestor"> <!-- position:relative -->
                <div id="absolute"></div> <!-- position: absolute -->
            </div>
        </div>
    </div>
</body>

이 경우 #ancestor2의 position이 relative이지만 #ancestor가 #absolute에 더 가까우므로 #absolute는 #ancestor에 대해 relative하게 동작한다.

 

<body>
    <div id="ancestor2"> <!-- position:relative -->
        <div>
            <div id="ancestor"> <!-- position: relative -->
            </div>
            <div id="absolute"></div> <!-- position: absolute -->
        </div>
    </div>
</body>

이 경우 #ancestor는 #absolute의 조상요소가 아니므로 #ancestor2에 대해 relative 하게 동작한다.

 

<body>
    <div id="ancestor2"> <!-- position:relative -->
        <div>
            <div id="ancestor"> <!-- position: relative -->
            </div>
        </div>
    </div>
    <div id="absolute"></div> <!-- position: absolute -->
</body>

이 경우 역시 #ancestor2가 #absolute의 조상요소가 아니므로 최초의 Containing Block인 body에 대해 relative하게 동작한다.

 

Conclusion

또 공부 허술하게 한게 발목을 잡았다. 열심히 공부하자.

 

Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/position

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block