Position

position : 요소를 원하는 위치에 자유롭게 이동하기 위해서 사용하는 프로퍼티

 

종류는 5가지,

종류에 따라 기준점이 달라진다.

 

① static

-모든 요소의 기본값

 

② relative

-float 되지만 원래 있었던 자리를 기억함

-원래 있었던 자리를 기준으로 이동한다.

 

③ absolute ★

-float의 특징과 동일하다.

  ㄴ붕 뜨면서 block으로 변한다.

  ㄴ길막을 못하는 block이 된다.

-float의 특징 중 'inline 요소가 float된 요소를 인식한다'는 적용되지 않는다.

-자신만의 기준을 새롭게 정할 수 있다.

-position이 static이 아닌 조상요소를 기준으로 선택한다. (필수적으로 설정해야한다.)

-보통 relative를 쓴다.

 

④ fixed

-absolute와 동일하다.

-차이점은 기준점이 viewport로 정해져있다.

*viewport : 브라우저 창의 전체크기

 

⑤ sticky : 지원하는 브라우저가 많지 않아 skip

 

 

 

 

<옮기는 방법>

-top or bottom, left or right 중에 하나씩만 사용해서 옮기는게 정신건강에 좋다.

 

 

 

 

position과 관련한 또 다른 프로퍼티

z-index : 요소를 수직(z축)으로 이동할 때 사용, 값은 정수로 주어야 한다. ex) z-index : 2