Korean_hamster
지현의 개발자 성장과정
Korean_hamster
전체 방문자
오늘
어제
  • 분류 전체보기 (122)
    • Front-End Developer (79)
      • Project (12)
      • HTML (8)
      • CSS (17)
      • Computer Science (9)
      • JavaScript (20)
      • React (13)
    • 이런저런 생각 (7)
    • 주간 성장회고 (24)
    • English (0)
    • 리뷰 (2)
    • Books (5)

블로그 메뉴

  • 방명록

공지사항

인기 글

태그

  • fetch
  • 비전공자개발자
  • 비전공개발자
  • 반응형웹
  • 프론트앤드스쿨
  • 프론트앤드
  • 리액트
  • CSS
  • 깃
  • 라우터
  • HTML
  • 멋쟁이사자처럼
  • 면접관님
  • 깃헙
  • CS
  • AtomicHabits
  • sass
  • flex
  • 멋사
  • js

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Korean_hamster
Front-End Developer/CSS

가지고 놀면서 배우는 position: absolute;

가지고 놀면서 배우는 position: absolute;
Front-End Developer/CSS

가지고 놀면서 배우는 position: absolute;

2022. 4. 25. 23:55

div 안에 div 안에 div

  <body>
    <div class="grand">
      <div class="father">
        <div class="child"></div>
      </div>
    </div>
  </body>

 


1. .child에 position:absolute를 주자. 

 

그리고 top과 left를 0을 줌으로써,

어디를 기준으로 위치가 이동되는지 보자.

      .child {
        width: 30px;
        height: 30px;
        background-color: orange;
        position: absolute;
        top: 0;
        left: 0;
      }

뷰포트를 기준으로 top: 0, left: 0이 적용되어 뷰포트 최상단 왼쪽에 붙었다.

기준이 되는 부모컨테이너를 지정해주지 않고 단독으로 absolute를 가지고 있으면, 뷰포트 전체 창 기준에서 움직인다.

 

흔히 우리가 position:absolute 사용 시 기준이 되는 부모컨테이너를 지정해주지 않으면 body 혹은 html을 기준으로 움직인다고 하는데, 위 body영역을 보면 알 수 있듯이 그건 틀린 이야기이다. 뷰포트 기준이다!

 


2. 부모컨테이너 영역 지정하기

 

.father에 position 속성이 static이 아닌 값을 줌으로써 .child가 움직일 영역을 .father로 한정시켜주었다.

      .father {
        width: 200px;
        height: 200px;
        background-color: #3837;
        position: relative;
      }

      .child {
        width: 30px;
        height: 30px;
        background-color: orange;
        position: absolute;
        top: 0;
        left: 0;
      }

초록색 박스인 .father기준으로 좌측상단에 붙었다.

여기서 중요한점은 꼭 position: relative가 아니여도 된다는 점이다.

나는 이제까지 꼭 relative 속성을 주어야만 자식이 부모로 인식하는 줄 알았는데 그게 아니였다.

 

출처 MDN

2번을 확인해보면 position 속성이 absolute인 경우, static이 아닌 position값을 갖고있는 (즉 static빼고 다 가능) 가장 가까운 조상을 기준으로 삼는다는 것을 알 수 있다.

 

 


3. potition사용해서 중앙정렬 하기

 

이제 .child를 .father의 정 중앙으로 보내보자.

 

일단 .child에 inset: 0;을 해준다.

이는 top, bottom, left, right를 모두 0으로 해주겠다는 말이다. (IE에서 안됨 주의)

 

이를 함으로써 .child가 사용할 수 있는 공간의 너비를 .father기준으로 

  • 맨 위부터 맨 아래까지 (top: 0부터 bottom: 0까지),
  • 가장 왼쪽부터 가장 오른쪽까지 (left: 0 부터 right: 0 까지) 사용할 수 있게 되는데,
결론은 .father의 영역 전체만큼 사용하겠다는 이야기다.

.child의 영역이 .father만큼 차지하고 있다.

이제 여기서 margin: auto auto;를 주면?

행복하다~

.child가 .father의 정 중앙에 왔다.

 


4. 여럿 자식들에 다 position: absolute주기

 

이제 .father도 position:absolute를 사용해서 .grand의 정 중앙으로 보내주자.

 

내가 예전부터 정말 헷갈렸던게, position:absolute는 움직이고싶은 자식요소에 주고, position: relative는 기준을 주고싶은 부모요소에 준다고 배워서 

 

"아니 그럼 그 부모요소도 또 그를 감싸고있는 부모요소를 기준으로 움직고싶으면 어떡하는거야?"

뭐 이런저런 혼돈이 있었는데... 지금은 깔끔히 해결되었다.

 

 

position:absolute는 움직이고싶은 자식요소에 주고, position: relative는 기준을 주고싶은 부모요소에 준다 라고 외우면 안되고,

 

이렇게! static이 아닌 가장 가까운 조상(부모)를 기준점으로 삼는다. 가 정확한 정답니다.

 

 

여기서는 .father와 .grand에 position: relative속성을 줘 보았다.

    <style>
      .grand {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        margin: 100px auto;
        position: relative;
      }

      .father {
        width: 200px;
        height: 200px;
        background-color: #3837;
        position: relative;
        inset: 0;
        margin: auto auto;
      }

      .child {
        width: 30px;
        height: 30px;
        background-color: orange;
        position: absolute;
        inset: 0;
        margin: auto auto;
      }
    </style>

.father 박스가 생각처럼 정 중앙에 위치하지 않았다. 

그 이유는 position 속성이 relative인 아이들은 기준점을 잡는게 여러가지가 있기 때문에, 사실 우리가 조상컨테이너인지, 서식맥락을 형성하는 요소인지, 자신의 콘텐츠 영역인지 이것들을 다 생각하며 기준점을 잡는건 정말 힘든 일이다.

 

그래서 기준점이 뭐라는건데..

 

결론은 position: absolute는 그 자체로 기준점이 되는 부모가 될 수도 있고(이제 왜인지 알겠나? static이 아니니까!) 또 자신이 기준점이 되는 부모를 가짐으로써 움직일 수도 있는 그런 존재가 된다는 거다. 부모요소에도, 자식요소에도 둘 다 position:absolute를 사용해도 된다는 것!

 

 

아래를 보면 .father와 그의 자식요소인 .child가 둘 다 position:absolute를 공통으로 가지고있지만 둘 다 기준점을 잘 잡아 위치이동이 가능한 것을 볼 수 있다.

    <style>
      .grand {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        margin: 100px auto;
        position: relative;
      }

      .father {
        width: 200px;
        height: 200px;
        background-color: #3837;
        position: absolute;
        inset: 0;
        margin: auto auto;
      }

      .child {
        width: 30px;
        height: 30px;
        background-color: orange;
        position: absolute;
        inset: 0;
        margin: auto auto;
      }
    </style>

 

 

행복~

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

 

Layout and the containing block - CSS: Cascading Style Sheets | MDN

The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that

developer.mozilla.org

 

저작자표시 (새창열림)

'Front-End Developer > CSS' 카테고리의 다른 글

빔캠프 종찬님 특강 - .wrapper는 어디에 쓰는고?  (0) 2022.04.29
Sass 연습 - @function 와 @return  (0) 2022.04.25
헷갈리는 CSS Combinators - 형제선택자 편  (0) 2022.04.21
background-image에 no-repeat이 안되요 - 초심자의 깜찍한 실수  (0) 2022.04.19
항상 헷갈리는 text-align, 딱 두 가지만 기억하자  (4) 2022.04.19
  • div 안에 div 안에 div
  • 1. .child에 position:absolute를 주자. 
  • 2. 부모컨테이너 영역 지정하기
  • 3. potition사용해서 중앙정렬 하기
  • 4. 여럿 자식들에 다 position: absolute주기
Korean_hamster
Korean_hamster
Keep pushing myself to the limits

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.