[CSS] Position: relative, absolute

🌈 CSS Position 이란?

HTML 요소가 웹 페이지 상에서 위치를 결졍하는 방식을 설정하는데 아래와 같이 다섯개로 정할 수 있다.

1) static postion

2) relative position

3) fixed position

4) absolute position

5) sticky poisition

 

💡block & inline

block : block 구조는 한 줄을 모두 차지 (<div>, <p>)

inline: 컨텐츠 크기 만큼만 차지 (<span>)

 

💻 Static position

HTML의 요소를 위치하는 가장 기본적인 방식은 정적 위치 지정방식이다. static 방식으로 설정된 요소는 top, right, bottom, left 속성 값에 영향을 받지 않고, 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다.

 

1번, 2번, 3번 => Static

💻 Relative position

요소 자기 자신의 원래 위치 (static일 때의 위치)를 기준으로 위치를 설정하는 방식이다.

 

💻 Fixed position

뷰포트를 기준으로 위치를 설정하는 방식이다. 웹 페이지가 스크롤 되어도 고정된 위치로 지정된 요소는 항상 같은 곳에 위치한다.

 

💻 Absolute position

고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작한다. 단지 뷰포트를 기준으로 하는 것이 아닌 위치가 설정된 조상 요소를 기준으로 설정하게 되는데 설정된 조상 요소가 없다면 HTML 의 body 요소를 기준으로 위치를 설정한다.

 

 

 

 

연습해볼 수 있는 사이트 => http://www.tcpschool.com/css/css_position_position

코딩교육 티씨피스쿨

잘 정리되어 있는 사이트 => https://creamilk88.tistory.com/m/197

[CSS] CSS Position (relative, absolute) 한 방에 정리!