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 속성을 주어야만 자식이 부모로 인식하는 줄 알았는데 그게 아니였다.
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의 영역 전체만큼 사용하겠다는 이야기다.
이제 여기서 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 |