📌 float

• none, left, right
• 기본적인 block이나 inline block 계산방법(normal flow)을 무시하고 별로의 배치효과를 가지게 됨
• 부모영역 내에서 가장 왼쪽, 가장 오른쪽으로 이동
• 자리 주위로 다른요소들이 배치 될 수 있음
• 별도의 레이어로 붕 떠서 존재
• 그 다음요소는 겹치는 것처럼 보이게 박스형태 유지

  ---

📌 position

🎮 normal flow

• 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관한 설명

🎮 static

• 기본값
• normal flow에 따라 변경

🎮 relative

• position이 static일 떄 기준으로 이동
• 원래 자기 자리 잡고 거기서 조금씩 이동
• 음수도 가능
• top, bottom 같이 쓴 경우 top 우선
• left, right 같이 쓴 경우 left 우선

🎮 absolute

• normal flow 제거
• float 속성처럼 레이어, 공중에 붕 뜨게 됨
• 나머지 요소는 자기들끼리 normal flow
• 조상 중에서 position이 static이 아닌 요소르 찾아 기준점을 삼는다.
• 그래서 조상으로 삼고 싶은 요소한테 position: relative를 설정함
  static이 아닌 조상이 없으면 body를 기준으로 삼음
• 스크롤을 하면 부모랑 같이 올라감

🎮 fixed

• 뷰포트를 기준으로 top,bottom,left,right 이동
• 스크롤을 해도 보임 화면 그 위치에 고정
• 항상 보이는 메뉴바 같은 거 만들 떄 사용

🎮 sticky

• normal flow 맞게 배치
• 스크롤 움직이다 자기 자리 찾으면 쏙 들어감
• top, bottom, left, right에 좌표 맞춰서 탁 걸림 그 이후로는 fixed처럼 스크로 내려도 고정
  sticky를 사용하려면 스크롤 하고 있는 대상의 바로 밑 자식이어야 함
  스크롤 되고 있는 건 body 바로 밑 자식에게 sticky 적용해야 동작함 자식의 자식은 동작X

• relative 말고는 좌표값이 뷰포트에서 top, bottom, left, right

  ---

📌 overflow

• 컨테이너의 width, height가 지정되어 있는 상태에서 내용이 담고 있는 컨테이너보다 넘칠 때 어떻게 처리할지에 대한 내용

🎮 visible

• 기본값

🎮 hidden

• 넘치는 부분이 짤려서 안보이게 됨

🎮 scroll

• 스크롤바 생김

🎮 auto

• 넘쳐흐르지 않으면 visible, 넘쳐흐르면 scroll

  ---

📌 z-index

• 웹 페이지에서는 원점을 기준으로 오른쪽으로 가면 x축 증가, 아래쪽으로 가면 y축 증가
• z축 자기들만의 레이어 순서가 있음
• 정수값 사용
• position을 건드리지 않았다면 코드 순서대로 쌓이겠지만
  position이 static이 아닌 애들이 static인 애들보다 앞에 있음
• 숫자가 클 수록 위에 올라오게됨