🚀 position fixed + absolute 같이 적용하는 법

position fixed + absolute 같이 적용하는 법

웹페이지를 만들때, 어떤 요소를 고정(fixed)했는데, 기본적으로 차지하고 있는 공간을 없애고(absolute)

완전히 자유로운 요소로서 다루고 싶을 때가 있다.

본 블로그의 우측하단 구독카드 엘리먼트 역시 이런식으로 구현되어있다.

우선 fixed와 absolute는 position의 개별속성으로서, 원래는 둘이 동시에 적용이 불가능하다.

하지만 트릭을 이용해서 둘의 합성을 구현할수 있다.

부모 엘리먼트를 fixed처리하고 그안의 자식 엘리먼트를 absolute처리하면 된다.

<!-- 부모 엘리먼트 -->
<div class="position">

  <!-- 자식 엘리먼트 -->
  <div class="row" style="background-color:skyblue; width:200px; ">
      <!-- 내용 -->
  </div>

</div>

/* 부모 엘리먼트 */
.position {     
  position: fixed;    
  height: 100%;
}

/* 자식 엘리먼트 */
.position .row {
  position: absolute;    
  left: 50px; /* 엘리먼트 위치 */
  top: 50px;
}

See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen.