1. 🤔position이란?
CSS position 속성은 문서에서 요소의 위치를 정의한다. 이 속성은 왼쪽, 오른쪽, 위쪽, 아래쪽 및 z-index 속성과 함께 작동하여 페이지에서 요소의 최종 위치를 결정한다.
포지션의 속성에는 5가지가 있다.
- static
- relative
- absolute
- fixed
- sticky
2. 🌏Static
요소의 기본값이며 요소는 문서의 일반적인 흐름에 따라 배치된다. 왼쪽, 오른쪽, 위쪽, 아래쪽 및 z-index 속성은 요소에 영향을 주지 않는다.
3. relative🧐
position: relative는 문서의 정상적인 흐름에 남아 있습니다. 그러나 Static 요소와 달리 왼쪽, 오른쪽, 위쪽, 아래쪽 및 z-index 속성은 요소의 위치에 영향을 준다. 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성 값을 기반으로 하는 오프셋이 요소 자체에 대해 상대적으로 적용된다.
4. 🌈absolute
position: absolute는 상위 요소를 기준으로 배치된다. 이러한 경우 요소는 일반 문서 흐름에서 변경 된다. 다른 요소는 해당 요소가 문서에 없는 것처럼 인식된다. 페이지 레이아웃의 요소에 대한 공간이 생성되지 않는다. 왼쪽, 위쪽, 아래쪽 및 오른쪽 값은 요소의 최종 위치를 결정한다.
한 가지 주의할 점은 요소가 position: absolute가장 가까운 위치에 있는 부모를 기준으로 배치된다는 것이다. 즉, 부모 요소는 가 아닌 다른 위치 값을 가져야 한다.
가장 가까운 상위 요소가 배치되지 않은 경우 배치된 다음 상위 요소를 기준으로 배치된다. 배치된 상위 요소가 없으면 해당 html 요소를 기준으로 배치된다.
5. fixed🔨
고정 위치 요소는 절대 위치 요소와 유사하다. 또한 문서의 정상적인 흐름에서도 제거된다. 그러나 절대 위치 요소와 달리 항상 요소에 상대적으로 위치한다
한 가지 주의할 점은 고정 요소는 스크롤의 영향을 받지 않는다는 것이다. 모니터 화면에서 같은 위치에 유지된다.
6. 📄sticky
sticky는 relative와 fixed의 혼합이다. 특정 스크롤 지점까지 상대적으로 위치가 지정된 요소처럼 작동한 다음 고정된 요소처럼 작동다.
7. inline⛸️
inline 요소가 새 줄에서 시작하지 않고 필요한 넓이만 차지한다.
넓이나 높이를 설정할 수 없다.
8. ⛸️inline-block🧱
inline-block 인라인 요소처럼 형식이 지정되어 새 줄에서 시작하지 않는다.
넓이와 높이 값을 설정할 수 있다.
9. block🧱
block 요소는 새 줄에서 시작하며 사용 가능한 전체 너비를 차지한다.
넓이와 높이 값을 설정할 수 있다.
10. float
레이아웃에서 필요에 따라 텍스트가 이미지를 둘러싸도록 이미지를 페이지에 설정할 수 있다. 이것은 일반적으로 적절하게 "텍스트 줄 바꿈"이라고 한다다.
📚참고📚
https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/
https://developer.mozilla.org/ko/docs/Web/CSS/position
https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/
https://css-tricks.com/all-about-floats/
