absolute
<!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;margin: auto;
}
.box1{
width:100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">
</div>
</div>
</body>
</html>
.box1{
width:100px;
height: 100px;
position: absolute;
top: 30px;
left: 30px;
}
position: absolute
- top / left / bottom / right 를 통해 위치 조정이 가능한 Positioning
- Nomal Flow 무관하게 Positioned Parent Element를 기준으로 위치를 조정할 수 있음
positioning이 되지 않은 (static) parent는 위치 기준이 되지 못함
자신에게 가장 근접한 static이 아닌 parent를 기준으로 함
static이 아닌 parent가 없다면 body를 기준으로
*{box-sizing: border-box;}
div{border: 1px solid black;}
.wrapper{
width: 300px;
height: 300px;
margin: auto;
position: relative;
}
.box1{
width:100px;
height: 100px;
position: absolute;
top: 30px;
left: 30px;
}
위치 잡을 때에는 relative보다 absolute가 더 편하다.
'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] Positioning - position: fixed (0) | 2020.04.07 |
|---|---|
| [CSS] z-index (0) | 2020.04.07 |
| [CSS] Positioning - position: relative (0) | 2020.04.07 |
| [CSS] overflow-y: auto (0) | 2020.04.07 |
| [CSS] Layout (0) | 2020.04.06 |