<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{box-sizing: border-box;}
div{border: 1px solid black;}
.wrapper{
width: 300px;height: 300px;
}
.box{
width:100px;height: 100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
</html>
작은 box의 위치를 옮기고 싶을때
margin, padding -> 이동보다는 크기가 커졌다는 개념 -> 다른 문제가 발생 할수도 있음
Positioning
static (default)
- HTML Element가 기본으로 가지는 위치설정
- Nomal Flow 영역의 기본규칙에 따라 배치 됨
relative
- 기본적으로 Nomal Flow 규칙에 따라 요소가 원래 있어야 하는 위치로부터
- Top / Left / bottom / right 속성을 이용하여 위치를 조정할 수 있다.
absolute
fixed
relative
.box{
width:100px;
height: 100px;
position: relative;
top:20px;
left: 20px;
}
relative - '원래 있어야 하는 위치'로부터 이동한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{box-sizing: border-box;}
div{border: 1px solid black;}
.wrapper{
width: 300px;height: 300px;
}
.box1{
width:100px;
height: 100px;
}
.box2{
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
.box2{
width:100px;
height: 100px;
position: relative;
top: 20px;
}
.box2{
width:100px;
height: 100px;
position: relative;
bottom: 20px;
}
'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] z-index (0) | 2020.04.07 |
|---|---|
| [CSS] Positioning - position: absolute (0) | 2020.04.07 |
| [CSS] overflow-y: auto (0) | 2020.04.07 |
| [CSS] Layout (0) | 2020.04.06 |
| [CSS] Internal Style, External Style, 선택자 (0) | 2020.04.03 |