[CSS] 포지션(Position), 위치 지정방식의 종류, z-index

1. css Position

• 요소의 위치를 결정하는 방식을 결정
  
  

2. 위치 지정방식

2-1. 정적 위치 지정방식

• static position, 기본값
• HTML 요소의 위치를 결정하는 기본적인 방식
• 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식
  
  

2-2. 상대 위치 지정방식

• relative position
• HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
• top, left, right, bottom 속성값을 사용하여 재설정

 

2-3. 고정 위치 지정방식

• fixed position
• 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
• 뷰포트를 기준으로 위치를 설정하는 방식
• top, left, right, bottom 속성값을 사용할 수 있음
  
  

2-4. 부모태그를 이용한 고정 위치 지정방식

• sticky position
• fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위치값을 사용하는 방식
• 익스플로러에서는 작동하지 않음

 

2-5. 절대 위치 지정방식

• absolute position
• 뷰포트를 기준으로 위치를 설정하는 방식
• 조상요소를 기준으로 위치를 지정할 수 있음
• 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
• 조상요소를 기준으로 위치를 지정하려면 조상요소는 반드시 정적 위치 지정방식이 아니어야 함
• top, left, right, bottom 속성값을 사용할 수 있음

 

3. z-index

• HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
• 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
• 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨