▷ static position
기본 값
static은 아무런 값을 주지 않았을 때, 본인의 기본 위치이다.
요소들이 Normal Flow에 따라 배치된 상황
.static {
position: static;
background-color: lightcoral;
}
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position</title>
<style>
* {
box-sizing: border-box;
}
body {
height: 1500px;
}
.container {
/* position: relative; */
height: 300px;
width: 300px;
border: 1px solid black;
}
.box {
height: 100px;
width: 100px;
border: 1px solid black;
}
.static {
/* position: static; */
background-color: lightcoral;
}
.absolute {
/* position: absolute; */
background-color: lightgreen;
/* top: 100px; */
/* left: 100px; */
}
.relative {
/* position: relative; */
background-color: lightblue;
/* top: 100px; */
/* left: 100px; */
}
.fixed {
/* position: fixed; */
background-color: gray;
/* top: 0; */
/* right: 0; */
}
</style>
</head>
<body>
<div class="container">
<div class="box static">Static</div>
<div class="box absolute">Absolute</div>
<div class="box relative">Relative</div>
<div class="box fixed">Fixed</div>
</div>
</body>
</html>'WEB > CSS_ concepts' 카테고리의 다른 글
| Fixed Position (0) | 2024.03.07 |
|---|---|
| Absolute position (0) | 2024.03.07 |
| Relative position (0) | 2024.03.07 |
| [CSS] CSS Position (0) | 2024.03.07 |
| [CSS] Box Model _ 구성요소 / 개발하기 전에 ♥border-box(o)♥ 설정을 하자. (0) | 2024.03.07 |