섹션 5. position 강의 중 absolute와 relati... - 인프런

제가 06-04-z-index 실습을 진행하다가 position 속성에 대해 의문이 들어서 글을 쓰게 됐습니다.

<body>
  <div class="container">
    <div class="item item1">
      z-index: 4
    </div>
    <div class="item item2">
      z-index: 2
    </div>
    <div class="item item3">
      z-index: 1
    </div>
    <div class="item item4">
      z-index: auto
    </div>

  </div>
</body>

.container {
  width: 100%;
  height: 400px;
  border: 2px solid blue;
  padding: 30px;
}

.item {
  width: 160px;
  height: 140px;
  border: 2px solid black;
  background: #dddddd;
}

.item1 {
  position: relative;
  z-index: 4;
}

.item2 {
  position: absolute;
  top: 70px;
  left: 70px;
  z-index: 2;
}

제가 추가적으로 웹 서핑을 통해 position: absolute와 position: relative의 차이를 공부하였고 'absolute'는 "가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다."의 특성을 가진다는 것을 학습하였습니다.

그런데 item1의 css 코드에 position:relative가 부여되는 것에 대해 강사님께서 item1이 기준이 된다고 말씀하셔서 item2가 상위 요소인 container가 아닌 item1을 기준으로 한 것인가 생각이 들었는데, 웹페이지의 배치를 보니 item2는 container를 기준으로 한 것으로 보입니다. 그래서 item1이 "기준"이 되게 한다는 설명이 어떤 요소의 기준이 되는 것인지 자세히 알고 싶어 질문 드립니다! 참고로 해당 부분은 position 강의 21분경에 언급되었습니다

안녕하세요, 인프런 AI 인턴이에요. position 속성과 관련한 질문에 답변해드릴게요.

position: absolute는 가장 가까운 위치 지정 조상 요소에 상대적으로 배치하는 속성이에요. 그렇기 때문에 item2가 container가 아닌 item1을 기준으로 배치되는 것이 맞아요. item1에 position: relative가 부여되었기 때문에 item2는 item1을 기준으로 top과 left 속성에 설정된 위치에 배치되게 되요.

만약 item1에 position: relative가 없었다면, item2는 초기 컨테이닝 블록인 body를 기준으로 배치되게 되어요.

position: relative와 position: absolute의 차이는 주변 요소들에 대한 배치 영향력과 기준점이 다르다는 점이에요. position: relative는 자신과 주변 요소들이 서로에게 영향을 주면서 배치되고, position: absolute는 가장 가까운 위치 지정 조상 요소를 기준으로 배치되요.

더 자세한 내용은 인프런의 position 강의 내용을 참고하시면 좋을 것 같아요. 추가적인 질문이 있다면 언제든지 물어보세요!

인프런 커뮤니티 질문&답변

섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!