Position

📌 Position

---

💡 레이아웃 보다는 위치를 조금 옮기고 싶을 때 사용한다.

1. fixed
박스를 초기 위치에 고정시킨다. fixed는 새로운 레이어를 만든 다고 볼 수 있음. 기존과는 다른 레이어에 컨텐츠를 배치한다. 이 때~~! 만들어진 레이어의 디폴트 값은 작성된 컨텐츠의 끝을 기준으로 만들어짐.

예시로 div1, div2 두 개의 박스를 만들고 top값을 수정했을 때는 위의 박스와 겹치게 되버리지만 left를 수정했을 때는 겹치지 않게 된다. div1,2 를 그냥 만들었을 때는 두 박스가 서로 동일한 레이어에 있기 때문에 박스가 순서대로 쌓임. div1 을 fixed 시키고 div2를 그냥 두었을 때는 서로 새로운 레이어에 위치하기 때문에 둘다 첫 번째 위치에 자리잡는다!

2. static
디폴트 값. 레이아웃이 박스를 처음 위치하는 곳에 두는 것을 말한다.

3. relative
포지션을 relative로 하면 상하좌우 속성을 사용할 수 있다. 엘리먼트가 처음 위치한 곳을 기준으로 수정 하는 것.

4. absolute
가장 가까운 relative 부모를 기준으로 위치를 이동시킬 수 있다.

🖊 relative와 absolute

---

💡 body 안에 div1, div2가 있을때 두 번째 박스를 첫 번째 박스의 기준으로 옮기고 싶다면
div1의 포지션을 relative로, div2의 포지션을 absolute로 만들어서 상하좌우를 조정해야 한다. div1의 포지션을 변경해주지 않으면 body를 기준으로 이동된다.