position이란?
css 문서상에서 요소를 배치할때 사용하는 속성입니다.
속성은 static, relative, absolute, fixed, sticky 총 5가지인데,
여기서는 static, relative, absolute를 집중적으로 알아보겠습니다.
static
position: static;
이 속성의 값은 기본값입니다.
position에 대한 값을 쓰지 않으면 요소는 기본적으로 static으로 할당됩니다.
예시와 그림을 보겠습니다.
코드
html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="container">
<div class="ex2"></div>
<div class="ex3"></div>
</div>
</body>
</html>css
.container {
position: static;
top: 40px;
width:500px;
height:400px;
background-color: antiquewhite;
}
.ex2 {
width: 200px;
height: 100px;
position: static;
background-color: aqua;
}
.ex3 {
width: 200px;
height: 200px;
position: static;
background-color:black;
}그림
static 예시 그림입니다.
순서대로 도형이 배치됨을 볼 수 있습니다.
relative
position: relative;
relative는 쉽게 생각해서 원래 있어야할 위치를 기준으로 움직인다고 생각하면됩니다.
그래서 top, left라는 속성값을 씁니다.
top: 40px;
left: 40px;
==> 원래 위치에서(기준) 위에서 부터 40px만큼, 왼쪽에서 부터 40px 만큼 움직임을 지시합니다.
코드
html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="container">
<div class="ex2"></div>
<div class="ex3"></div>
</div>
</body>
</html>css
.container {
position: static;
top: 40px;
width:500px;
height:400px;
background-color: antiquewhite;
}
.ex2 {
width: 200px;
height: 100px;
top:300px;
left:300px;
position: relative;
background-color: aqua;
}
.ex3 {
width: 200px;
height: 200px;
position: relative;
background-color:black;
}그림
민트색 도형이 relative를 적용한 예시인데, 원래 있어야할 위치에서(static) top, left만큼 이동한걸 볼 수 있습니다.
absolute
position: absolute;
absolute는 조상 중에 static이 아닌 것을 기준으로 잡습니다.
조상이란 위 그림에서 봤을때 container를 의미합니다.
html 태그 상에서 포함되어 있으면 조상입니다.
코드
html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="container">
<div class="ex2"></div>
<div class="ex3"></div>
</div>
</body>
</html>css
.container {
position: relative;
top: 40px;
width:500px;
height:400px;
background-color: antiquewhite;
}
.ex2 {
width: 200px;
height: 100px;
top:300px;
left:300px;
position: absolute;
background-color: aqua;
}
.ex3 {
width: 200px;
height: 200px;
position: relative;
background-color:black;
}그림
민트 도형이 static이 아닌 조상 container에 기준을 맞추어 같이 움직였습니다.
p.s
여기서 설명 드리지 않은 fixed와 sticky라는 속성의 값들도 있는데, 매우 간단합니다.
fixed는 특정한 화면상에서 위치 고정(스크롤을 옮겨도 같음)
sticky는 밀려나는 고정이랄까....
비교 사이트를 링크하겠습니다.
https://jsfiddle.net/daehwan/xk0od1av/28/
'공부 정리 > 웹(Web)' 카테고리의 다른 글
| getBoundingClientRect() Vs css 좌표 (0) | 2022.02.01 |
|---|---|
| [CSS] box-sizing (0) | 2022.01.24 |
| [자바스크립트] Array.some() (0) | 2021.12.14 |
| [자바스크립트] 단축 평가 (0) | 2021.11.04 |
| [자바스크립트] 호이스팅 (0) | 2021.10.29 |
댓글