position : absolute가 부모 엘리먼트 밖으로 나가는 문제

absoluteThe 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. - MDN, position

 

MDN 문서에 따르면 absolute는 가장 가까운 positioned element를 기준으로 위치를 잡는다.

이때 positioned element란 포지션이 static이 아닌 엘리먼트를 말한다.

즉, 부모 엘리먼트의 포지션을 relative 또는 absolute로 변경해 주면 정상 작동한다.

 

W3C의 containing block 정의에서도 관련된 내용을 찾을 수 있다.

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.

2. Otherwise, the containing block is formed by the padding edge of the ancestor.

If there is no such ancestor, the containing block is the initial containing block.

 

관련 스택오버플로, 질문과 답변이 깔끔하다.

https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent?rq=1

Position absolute but relative to parent

w3c의 containing block 정의

https://www.w3.org/TR/CSS2/visudet.html#containing-block-details

Visual formatting model details