본문 바로가기
Web/CSS

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

by coding-choonsik 2023. 3. 31.
728x90
반응형
SMALL

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를 사용
  • 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨

 

728x90
반응형
LIST