CSS position absolute의 기준 위치

이번에 가운데에 선을 긋는 작업을 하던 중, CSS를 사용해 `position: absolute`와 `left: 50%`를 주어 가운데에 선을 그으려고 했다. 3개의 DIV 내부에 선을 긋기 위해 아래와 같이 작업을 했다.

 

<div>
	<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>

<div>
	<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>

<div>
	<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>

 

결과는 처참했다. 부모 div의 가운데가 아니라 전체 화면의 가운데에 같은 줄이 3개가 겹쳐서 그려졌다. 각 div의 가운데에 그리려고 검색을 하던 중 absolute와 부모와의 관계에 대한 글을 보게 되었다.

 

absolute의 위치 기준은 position이 relative, fixed, absolute인 가장 가까운 부모이다. 즉 위의 코드에서는 부모 div가 기준이 아니라, body가 기준이 된 것이다.

 

나는 아래와 같이 부모 div 태그에 position을 relative로 주고, 다시 시도해봤다.

 

<div style="position:relative">
	<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>

<div style="position:relative">
	<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>

<div style="position:relative">
	<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>

 

부모 div 내에 선이 그어진 것을 이번에는 확인할 수 있었다.

 

position absolute를 사용하기 전에 기준으로 삼을 부모의 position을 먼저 확인하고, 사용하는 습관을 들여야겠다. 그리고 이 부분은 다음에도 써먹을 수 있을 것 같다.