absolute와 relative 사이에 헷갈리는 점이 있어서 적어본다. position: absolute는 position: relative인 parent를 기준으로 위치가 정해진다는 것에서 나에게 생긴 궁금증은 다음과 같다.
grand-parent | parent | child이렇게 있을 경우, grand-parent와 parent 모두 relative이고 child는 absolute라면 child는 과연 어떤 parent를 기준으로 삼을 것인가?위와 같은 상황에서 grand-parent는 relative이고 parent, child는 absolute라면, parent와 child 모두 grand-parent를 기준으로 삼을 것인가?
우선 absolute의 정의부터 살펴보면 다음과 같다.
The element is positioned relative to its first positioned (not static) ancestor element
Ref : https://www.w3schools.com/cssref/pr_class_position.asp
즉 position: static 을 제외한 가장 첫 번째로 만나는 ancestor를 기준으로 삼는다.
1. grand-parent/parent(relative), child(absolute)
이 경우에서 child는 grand-parent가 아닌 parent를 기준으로 삼아 위치가 정해진다.
absolute는 가장 첫 번째로 만난 parent를 기준으로 삼기 때문인데, 따라서 child의 가장 첫 번째 ancestor인 parent가 선택되게 된다.
2. grand-parent(relative), parent/child(absolute)
parent가 position: static이 아니기 때문에, 이번 역시 child는 parent를 기준으로 삼는다.
example
일단 예제로 사용할 코드는 다음과 같다.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width-device-width, initial-scale=1.0" />
<meta http-equiv="X-US-Compatible" content="ie=edge" />
<title>Position</title>
<style>
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 900px;
background-color: red;
}
.A-box {
width: 600px;
height: 600px;
background-color: black;
position: relative;
}
.B-box {
width: 400px;
height: 400px;
background-color: yellow;
position: absolute;
right: 100px;
top: 10px;
}
.C-box {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="A-box">
<div class="B-box"><div class="C-box"></div></div>
</div>
</body>
</html>
result
child가 parent를 기준으로 위치를 이동시키는 것을 볼 수 있다.
Conclusion
아무튼 결론을 내리자면 absolute는 static을 제외하고 첫 번째로 만나는 ancestor를 기준으로 삼는다.
'Programming$ > Web Develop' 카테고리의 다른 글
| [.CSS] z-index element 우선순위 (0) | 2019.02.26 |
|---|---|
| [.CSS] 구글 폰트 적용하기 (1) | 2019.02.26 |
| [.HTML/CSS] Font Awesome's Free CDN 사용하기 (0) | 2019.02.24 |
| 티스토리 사이드 바에 검색 창 추가하기 (1) | 2018.01.14 |
| HTML5 (0) | 2017.09.01 |