이번에 nav를 만들면서 position의 fixed를 사용했다.
position에는 여러가지 배치 방법이 있는데 유용하게 사용되기 때문에 다시 보기 위해서 정리해둔다.
참고자료는 유튜브 유노코딩이고, 보고 이해하면서 일일이 정리한 내용이다.
✔️ 정의
1. position 속성값: position은 문서 상의 요소를 배치하는 방법을 정의
2. position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종위치를 결정하는 방식 (offset)
➡️ 상하좌우 위치 지정은 필요에 따라 선택적으로 적용!
1. position을 어떤 값을 사용할지 정하고 2. 그로부터 얼마나 위치를 옮길지(offset)을 결정한다.
1️⃣ relative
position을 relative로 주고 top, left를 각각 100px로 주었기때문에 위, 왼쪽으로부터 각각 100px이 떨어져있는 것을 확인할 수 있다.
🔫 일반적인 문서의 흐름을 따른다.
p태그는 빨간박스와 상관없이 자기가 위치해야 할 곳에 위치한다.
2️⃣ absolute
🔫 자기의 상위요소중에서 가장 가까운 position relative인 것을 기준으로 위치한다.
가장 가까운 relative인 노란박스를 기준으로 빨간박스(absolute)가 위치를 결정하는 것을 확인할 수 있다.
🔫 문서의 흐름과 무관하다
html상으로는 .abs가 위에 있고 p태그가 아래에 위치하지만, absolute는 문서의 흐름과 무관하기 때문에 순서대로 나오지 않은 것을 확인할 수 있다. 만일 .abs의 위치를 top:0으로 준다면 p태그와 빨간박스가 겹치는 것을 확인할 수 있다.
(문서의 흐름과 무관하기 때문에 빨간박스의 위치에 따라 p태그의 위치가 바뀐다)
🔫 만약 가까운 상위요소중 relative인 것이 없다면?
브라우저를 기준으로 위치를 정한다.
3️⃣ fixed
한자리에 그대로 고정!
4️⃣ sticky
상위요소가 스크롤될때 자기가 오프셋되는 부분만 달려붙고 평소에는 일반적인 흐름대로 움직인다
(fixed는 항상 위치값이 고정된 것을 가진것과 차이가 있다)
정리
- posiotion은 문서상에 요소를 배치하는 방법을 정의한다. 기본값은 static
- top, bottom, right, left를 선택적으로 사용해 위치를 지정한다
- relative는 자기의 원래 위치를 기준으로 오프셋을 적용한다
- absolute는 가장 가까운 포지션 요소를 기준으로 오프셋을 적용한다.
- fixed는 고정되어 움직이지 않는다. 스크롤 이동에도 꼼짝 않는다.
- sticky는 스크롤 되는 상위요소를 기준으로 오프셋을 적용한다.
참고자료
다른 강의보다 이 강의를 들으면서 position에 대해 확 이해가 됐다.
그래서 내용을 정리해보았다. 자주 사용하지 않으면 잊어버리는 내용도 있을 것 같아서 블로그에 글로 적어서 다시 읽어보고자 한다.
nav를 만들때 전에는 container를 만들고 그 안에서 또 flex도 해주는 방법을 사용했는데 굳이 그렇게해서 위치를 지정할 필요가 없다는 것도 알았다. fixed로 왼쪽 상단, 오른쪽 상단에 고정시켜주면 된다.
flex도 유용하지만 position을 이용하면 보다 더 정확하게 내가 위치시키고자 하는 곳에 위치를 시킬 수 있어서 유용한 것 같다.