섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!
제가 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분경에 언급되었습니다
回答 1
0
안녕하세요, 인프런 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 강의 내용을 참고하시면 좋을 것 같아요. 추가적인 질문이 있다면 언제든지 물어보세요!
background vs background-color
0
28
1
노션 자료위치
0
85
2
강의 수강 후 실습
0
327
1
강의 내용과 같은 작업을 쉽게 도와주는 라이브러리 같은 것도 있나요?
1
311
1
강의학습시 작성한 코드를 블로그에 올려도 될까요?
0
394
2
안녕하세요 이미지 관련해서 질문이 있습니다,
0
365
1
codepen질문입니다.
0
304
2
transition질문있습니다~
0
349
1
노션 학습 링크
0
374
1
반응형 실습
0
284
2
@media 미디어 쿼리 적용 안되는 이유
0
1262
1
35분 강의 내용중 :after 사용관련
0
270
2
코드캠프 로드맵 이후 질문사항
0
328
1
diary-date 부분 질문
0
314
1
transform 3번째 강의 질문
0
313
1
강의자료
0
470
1
학습자료 요청건
0
396
1
레이아웃 질문드려요~
0
384
1
vscode 새로운 폴더 불러오기
0
391
1
grid속성 6:36에 나오는 것.
0
318
1
left:calc(100% - 100px) 질문드립니다.
0
734
1
텍스트박스안에서 padding-bottom 이 이렇습니다
0
400
2
단위심화 강의 중 질문 있습니다.
0
345
1
영상 중간 생략
0
319
1