[CSS] Chapter 12. Position(static, relative, absolute, fixed, sticky), z-index, overflow

position

• 요소를 어떻게 배치할지 결정하는 CSS 속성
• 우선 Normal Flow 개념을 이해하는 것이 중요함
  • Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름
  • Remind) 인라인 요소, 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음
    • 즉 요소의 특성에 따라 Normal Flow가 정해져 있는 것
  • 코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다.
• positon 속성을 통해 Normal Flow에서 벗어나, 개발자가 원하는 대로 제어하여 배치할 수 있음
• position 속성은 top, bottom, left, right 속성과 함께 사용함
  • position의 종류에 따라 top, bottom, left, right를 적용하는 방식이 달라짐
• 종류
  • static
  • relative
  • absolute
  • fixed
  • sticky

 

---

 

static

• default 값
• 기준이 없다. 좌표적용 X
• top, bottom, left, right 속성을 사용할 수 없음 (작성해도 무시된다)
• 단순히 Normal Flow로 배치된다.

 

relative

• 기준 : 원래 내 위치
• 동작 흐름
  1. Normal Flow를 따라 배치한 원래 자기 자신의 위치를 기준으로
  2. top, right, bottom, left의 값에 따라 최종 위치 지정 (offset 적용)
• 값 : 양수값, 음수값 모두 줄 수 있음
• 반대가 되는 값을 동시에 선언하면?
  • top, bottom을 동시에 선언하면? top만 적용
  • left, right를 동시에 선언하면? left만 적용
    

 

absolute

• 기준 : 부모
• 동작 흐름
  1. 요소를 Normal Flow에서 제거하고,
  2. 가장 가까운 부모 요소를 기준으로
     • position : static(디폴트 값)이 아닌 가장 가까운 부모 요소
     • 그런 요소가 없으면 body를 기준으로
  3. top, right, bottom, left 값에 따라 최종 위치 지정 (offset 적용)
• Normal Flow에서 제거되므로, 마치 float 처럼 새로운 레이어가 추가되어 둥둥 뜨게 된다.
• 주로 기준점으로 잡고싶은 부모를 position:relative로 설정하고, 자식 요소를 position:absolute로 자주 쓴다.

 

fixed

• 기준 : 브라우저
• 동작 흐름
  1. 요소를 Normal Flow에서 제거하고,
  2. 눈에 보이는 뷰포트를 기준으로
  3. top, right, bottom, left 값에 따라 최종 위치 지정
• 스크롤을 쭉 해도 계속 따라온다.
  • 뷰포트(눈에 보이는 창)이 계속 변경되기 때문에!
  • 예) 팝업창, 문의하기 버튼, 네비게이션 바, 광고창 등

 

sticky

• 동작 흐름
  1. Normal Flow를 따르고,
  2. 가장 가까운 스크롤이 되는 부모를 기준으로
     • 기본적으로 스크롤이 되는 상황에서만 효과가 나타난다.
  3. top, right, bottom, left 값에 따라 최종 위치 지정
• sticky라는 이름을 기억하면 이해하기가 쉽다. 스크롤을 내리다가 특정 시점부터 마치 fixed처럼 동작한다.

 

---

 

z-index

• 여러 개의 요소가 겹칠 때, 위로(z축으로) 쭉 쌓이게 된다.
  • 겹치게 쌓이면 어떤 요소는 가려질 수 있다.
• z축의 순서를 지정하는 속성이 z-index
  • z-index는 position이 지정된 요소에만 동작한다.
• 값 : 정수(양의 정수, 음의 정수)
  • 수가 클수록 위로 올라온다.
• z-index: auto
  • default 값
  • 코드를 작성한 순서대로 쌓이게 된다.
  • position을 별도로 지정하면(==relative, absolute, fixed, sticky), static보다 무조건 위로 뜨게 된다.
• 예) 팝업창, 경고창 등

 

---

 

overflow

• 컨텐츠가 요소의 크기보다 많아서 넘쳐 흐를 때, 이를 어떻게 표현할지 지정하는 속성
  • 참고) 요소의 크기 지정 : width, height
  • 내용이 넘치면 다른 요소와 내용이 겹칠 수 있기 때문에 목적에 맞게 조정해줘야 함
• overflow: visible
  • default 값
  • 넘치면 깨져서 보임
• overflow: hidden
  • 넘치는 컨텐츠는 안보임
• overflow: scroll
  • 넘치는 컨텐츠는 스크롤로 내려서 볼 수 있음
• overflow: auto
  • 브라우저가 알아서 선택