[CSS] position이란?

positon 속성과 배치방법 

position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.

• static : 요소를 일반적인 문서 흐름에 따라 배치합니다.
• relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
• absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다.
• fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝블록을 기준으로 삼아 배치합니다. (바뀌지 않는 위치에 지정)
• sticky : static + fixed 특징을 동시에 가집니다.

 

용어 공부

오프셋(offset) : top, left, right, bottom 값을 의미하고 기준이 되는 곳으로부터 얼마만큼 떨어져있는지를 나타내기 위한 필요한 속성입니다.

 

뷰포트(viewport) : 화면에서 실제 내용이 표시되는 영역으로 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다.

 

컨테이닝블록 : 요소의 위치와 크기를 지정하는데 사용하는 블록을 의미합니다. 상대적인 값이나, 요소의 위치를 지정하는 기준이 필요할 때 사용한다는 의미입니다.

 

참고자료

CSS Position (static, relative, absolute, fixed) : https://mingeesuh.tistory.com/3

CSS Position (static, relative, absolute, fixed)

 

뷰포트 (viewport) : https://masssal.tistory.com/34

뷰포트 (viewport)

 

컨테이닝 블록 : https://velog.io/@1-blue/%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%8B%9D-%EB%B8%94%EB%A1%9D

🤔 컨테이닝 블록