position

✔️position 속성 값

1. static:웹사이트의 기본 속성값, (top, right, left, bottom을 이해하지 못함)
2. relative: HTML테그가 있는 위치에서 top, right, left, bottom 값을 통해 움직임
3. absolute: 부모영역에서 top, right, left, bottom을 이용해 주어진 위치로 움직임
4. fixed: absolute와 비슷하지만 스크롤을 내려도 그 위치에 고정, 무조건 브라우저 창 기준
5. sticky: relative와 비슷하지만 스크롤을 내리면 fixed처럼 그 위치에 고정

---

✔️상세 설명

1. static:웹사이트의 기본 속성값, (top, right, left, bottom을 이해하지 못함)

.locate {
  position: static;
  left: 30px; /* left 값을 줘도 움직이지 않음 */
  top: 30px; /* top 값을 줘도 움직이지 않음 */
}

---

2. relative: HTML테그가 있는 위치에서 top, right, left, bottom 값을 통해 움직임

.locate {
  position: relative;
  left: 30px;
  top: 30px;
}

---

3. absolute: 부모영역에서 top, right, left, bottom을 이용해 주어진 위치로 움직임

.locate {
  position: absolute;
  left: 30px;
  top: 30px;
}

---

4. fixed: absolute와 비슷하지만 스크롤을 내려도 그 위치에 고정, 무조건 브라우저 창 기준

.locate {
  position: fixed;
  left: 30px;
  top: 30px;
}

---

5. sticky: relative와 비슷하지만 스크롤을 내리면 fixed처럼 그 위치에 고정

.locate {
  position: sticky;
  left: 30px;
  top: 30px; /* 이 코드는 무시하는듯. */
}