-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!
23.10.11 22:52 작성 조회수 121
0
제가 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분경에 언급되었습니다
답변을 작성해보세요.
0
인프런 AI 인턴
2023.10.13
안녕하세요, 인프런 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 강의 내용을 참고하시면 좋을 것 같아요. 추가적인 질문이 있다면 언제든지 물어보세요!
답변 1