position: absolute의 무서움.

물망초. 2021. 2. 2. 23:06

나는 position: absolute를 참 좋아한다.
상위 fixed, absolute, relative, sticky를 만나기 전까지 찾아가는 집요함을 좋아한다.
물론 그로 인해 의도하지 않은 문제를 만날 때도 있지만.....

position .. absolute..

position은 5개의 값을 지닐 수 있다.
static, relative, absolute, sticky, fixed 이렇게 총 5개를 말이다.
오늘 말하고 싶은 대상은 물론 단 하나 absolute지만 말이다.

그 특징을 알아보고 무서움을 알아보자.
아는 특징이라고 해봐야 딱 두개다...

첫번째!

난 멈추지 않아. fixed, absolute, relative, sticky 를 만날 때 까지는!
얘는 참 어마무시한 아이인데, 무려 상위 element가 position 값으로 relative를 지닌 대상을 찾기 전까지는 body까지 찾아가는 아이다.
따라서 아무 생각없이 top, bottom, left, right 값을 줬다가는 죽쑨다.

두번째!

아니 %를 할당하고 컨테이닝 블록(containing block) 설정안하면 어떻게 하고 싶다는거니?
이 예시는 이미지와 코드를 통해서 살펴봐야한다. 결국 이 얘기를 하고 싶어서 글을 쓴거니.
위 이미지를 보면 무엇이 떠오르는가? 뭔가 이상하다 싶지 않을까? 그럼 아래 코드도 같이 살펴보자

<head>
  ...
  <style>
    .box:last-child {
      margin-top: 20px;
    }
    .outer {
      width: 100px;
      height: 100px;
      background: red;
    }
    .inner1 {
      position: relative;
      width: 50%;
      height: 50%;
      background: blue;
    }
    .inner2 {
      position: absolute;
      width: 50%;
      height: 50%;
      top: 100px;
      left: 100px;
      background: skyblue;
    }
  </style>
...
<body>
  ...
  <div class="box outer">
    <div class="box inner1"></div>
    <div class="box inner2"></div>
  </div>
  ...

여기서 inner2가 body까지 올라간다는 것을 눈치 챘을 것이다. 물론 그건 괜찮다. 예를 들어 Navigation을 만들었다 치자. body를 대상으로 잡아도 충분히 아주 잘 동작한다. 하지만, 위 이미지에서 보면 %로 적용된 width, height의 값이 소름돋게도 body를 기준으로 적용이 되면서 의도하지 않은 동작이 발생한다.
사용자는 아마 width: 50px, height: 50px의 값을 지닌 박스가 상단으로부터 100px, 좌측으로 100px 떨어지는 것을 예상했을 수도 있다.
하지만 이미지를 보면 전혀 의도한대로 움직이지 않는다...

결론.

position: absolute를 사용할 때는 relative를 잘 설정하자.
안그랬다가는 우리가 의도하지 않은 무서움을 만날 수도 있다. (container 잘 만들어서 숨겨두자!)

position: absolute의 컨테이닝 블럭 영역 식별방식

position 속성이 absolute인 경우, 컨테이닝 블록은 position 속성 값이 static이 아닌(fixed, absolute, relative, sticky) 가장 가까운 조상의 내부 여백 영역입니다.
position 속성이 absolute나 fixed인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도 있습니다.
1. transform이나 perspective 속성이 none이 아님.
2. will-change 속성이 transform이나 perspective임.
3. filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)
4. contain 속성이 paint임.

https://developer.mozilla.org/ko/docs/Web/CSS/All_About_The_Containing_Block

컨테이닝 블록의 모든 것 - CSS: Cascading Style Sheets | MDN

컨테이닝 블록의 모든 것 Jump to sectionJump to section 요소의 크기와 위치는 컨테이닝 블록(containing block)의 영향을 받곤 합니다. 대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 블록 레벨

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다. The source for this interactive example is stored in a GitHub repository. If you

developer.mozilla.org

'물망초.' 카테고리의 다른 글

e.target vs. e.currentTarget (0)	2021.03.25
rollup.config.js with sass 기본 설정 (0)	2021.02.15
border-box vs. content-box 간단정리 (0)	2021.02.02
개발 중 필요한 것을 정리해두자. (0)	2021.01.19
UUID가 필요 할 경우! (0)	2020.10.21

ABOUT ME

Note. Note.