Position

Position: static, relative, absolute, fixed

 

 

● 요소를 원하는 위치로 자유롭게 이동시키기 위해서 사용하며, 5가지의 position 종류가 있다.

 

 

● 각 타입마다 기준점이 다르기 때문에 기준점을 잘 생각해서 사용하여야 한다.

 

 

● top, left, right, bottom 을 사용하여 요소를 이동시킬 수 있다.

 

 

 

※ top을 기준으로 40px, left를 기준으로 30px 거리를 설정하고 싶다.

 

 

 

① static

 

▶ 모든 요소의 기본 position 값이다. 즉 모든 요소의 일반적인 상태는 static 이다.

 

 

 

② relative

 

▶ 기준점은 자기 자신이 있던 원래의 자리이다.

 

▶ float와는 다르게 relative는 부모, 형제요소가 집나간 요소의 자리를 잊어버리지 않는다.

 

 

 

③ absolute 

 

▶ 부모나 형제요소는 absolute가 적용된 요소를 인지하지 못하며 길막이 불가능하다. 즉 float와 거의 동일하다.

 

▶ float와 한가지 차이점이 있다면 absolute요소는 inline요소가 인지하지 못한다.

 

▶ 부모 요소들 중에서 자신의 기준점을 새로 정할 수 있다. 다만 position: static인 요소의 공간에는 기준점을 만들수 없다.

 

 

 

④ fixed

 

▶ absolute와 거의 모든것이 동일하다. 유일한 차이점은 viewport(전체 화면)을 기준으로 기준점을 잡는다.

 

 

※ z-index

▶ 요소의 높낮이를 결정하는데에 사용한다. (덮어쓰기)

 

▶ 예시

파랑이: z-index: 2

노랑이: z-index: 1

 

파랑이의 z-index값이 더 크므로 (더 높이 있으므로) 파랑이는 노랑이를 덮어씌운다.