[CSS] position:absolute의 독특한 규칙과 문제(padding-area)

position:absolute는 동작이 복잡해서 처음 css를 할 때 상당히 골칫거리다. 이 속성은 크게 3가지다.

• 1. absolute는 fixed와 더불어, 일반적인 문서의 레이아웃 맥락에서 제거되고 독립적인 맥락을 생성한다. 따라서 width처럼 부모로부터 물려받던 부분들을 새로 설정해야 한다.
• 2. absolute 요소의 최초 위치는 맥락에서 제거되기 전의 위치다. 하지만 위치 비정 속성(top, bottom, left, right)을 사용하면 가장 가까운 상위의 position:relative 요소, 만약 없다면 body를 기준으로 위치가 설정된다.
• 3. absolute 요소는 부모의 padding-area 왼쪽 모서리를 기준으로 시작한다. 이는 static 요소가 부모의 content-area 왼쪽 모서리를 기준으로 하는 것과 대비된다.

이 중 3번을 다루려고 한다. 아래 코드를 보면, absolute를 한 박스는 top:0; left:0를 할 시, 기준 컨테이너의 padding을 무시하고 테두리로 붙어버린다. 이는 기준 컨테이너의 패딩을 살리거나 레이아웃을 유지할 때 문제가 될 수 있다.

 

이를 해결하는 간단한 방법은 아래처럼 코드를 짜는 것이다.

  <style>
 .wrapper {
  width: 200px;
  height: 150px;
  padding: 20px;
  background-color: wheat;
  position: relative;
}

.wrapper__relative {
  position: relative;
  width: 100%;
  height: 100%;
}

.wrapper__absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 35px;
  background-color: rgb(250, 125, 103);
}
  </style>
  
  <div class="wrapper">
        <div class="wrapper__relative">
          <div class="wrapper__absolute">mix</div>
        </div>
      </div>

위 코드를 보면, 위치의 기준 컨테이너인 wrapper이 있고 절대위치 요소인 wrapper__absolute를 wrapper__relative로 감싼 것이다. wrapper__relative는 position:relative, width:100%, height:100%를 준다. 이러면,  wrapper__relative가 wrapper의 content-area를 채운다. 그리고, absolute 요소는 wrapper__relative의 테두리 부분에서 시작하니, 결과적으로 wrapper의 content-area에서 시작하게 된다. (아래 예시를 보면 좀 더 이해가 될 것이다.)

 

See the Pen position:absolute의 padding 문제 by charchar111 (@charchar111) on CodePen.