css기초이론 - css포지셔닝 (position: relative, absolute)
HTML, CSS 2021. 1. 15. 01:36반응형
relative : 부모 요소
absolute : 자식요소
자식은 부모요소 안에서 포지셔닝 됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Relative(부모요소), Absolute(자식요소)</title>
<style>
body {
margin: 0;
}
.parent {
width: 400px;
height: 400px;
border: 1px solid crimson;
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: dodgerblue;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Relative(부모요소), Absolute(자식요소)</title>
<style>
body {
margin: 0;
}
.parent {
width: 400px;
height: 400px;
/* border: 1px solid crimson; */
position: relative;
background-color: crimson;
margin: 100px;
}
.child {
width: 100px;
height: 100px;
background-color: dodgerblue;
position: absolute;
/* bottom: -50px;
left: 150px; */
left: 50%;
bottom: -50px;
/* 상대적임 */
/* 부모의 사이즈가 변해도 함께 이동 */
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
www.youtube.com/watch?v=jx5jmI0UlXU
반응형
'HTML, CSS' 카테고리의 다른 글
| 연습 Finance Logger (0) | 2021.01.22 |
|---|---|
| CSS - Sticky Position (0) | 2021.01.15 |
| css기초이론 - 포지셔닝 엘리먼트 보이고 감추가 (z-index, visibility, opacity, display) (0) | 2021.01.15 |
| css기초이론 - CSS포지셔닝 - 엘리먼트 배치하기 (속성 : position, fixed) (0) | 2021.01.15 |
| css 기초이론 - 박스모델 Box-Model(border, margin, padding) (0) | 2021.01.14 |