반응형
1.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
}
.green {
background-color: teal;
height: 100px;
position: absolute;
right: 0px;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
</div>
</body>
</html>
결과
2.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
}
.green {
background-color: teal;
height: 100px;
position: absolute;
bottom: 0px;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
</div>
</body>
</html>
결과
postion absolute 는 가장 가까운 relative 부모를 기준으로 이동시킴.
❤️ 예시 ❤️
green div는 absolute이고 relative한 부모를 찾아야 한다.
위 코딩에서 .green(<div class="green"></div>) div의 부모는
바깥의 div이지만 (민트색 div)
이 div는 relative가 아니다.
그래서 가장 가까운 relative 부모는 body가 된다 (노란색 body)
--> body는 바깥쪽에 있는 가장 relative한 부모가 될 수 있다.
--> 가까이에 있는 relative 한 부모를 찾지 못한다면 body 기준으로 옮기게 된다. (같은말 ㅋㅋ)
그래서 body를 기준으로 이동하게 됨.
근데 만약 body를 기준으로 옮기고 싶지 않다면
가장 가까운 부모인 민트색 div를 relative로 만들어 주는 방법도 있다.
아래처럼 ⤵️
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.green {
background-color: teal;
height: 100px;
position: absolute;
bottom: 0px;
right: 0px;
width: 100px;
}
</style>
</head>
<body>
<div>
<div class="green"></div>
</div>
</body>
</html>
결과
position을 absolute로 하면
(가장 가까운 relative 부모를 이용해서)
내가 원하는 좌표대로 옮길 수 있다!! cool
(첨언)
그외 position이 absoulte인 자식은
가장 가까운 relative 부모 뿐만 아니라
가장 가까운 부모가 fixed, sticky 등(static은 제외) 일 때도 그 부모를 기준으로 이동하게 된다.
반응형
'2. CSS' 카테고리의 다른 글
| CSS nth-child() 사용하기 (even, odd, 3n+1) (0) | 2024.11.28 |
|---|---|
| CSS pseudo selectors / first-child & last-child (0) | 2024.11.27 |
| CSS position relative 사용해서 div 박스 옮기기 (0) | 2024.11.26 |
| CSS position fixed 사용하기 2 (0) | 2024.11.24 |
| CSS position fixed 사용하기 (0) | 2024.11.24 |