포지션

11.3 오프셋 프로퍼티

top bottom left right
=> 오프셋
50% 등 비율로도 설정 가능
음수값이면 밖으로 나가게 됨
패딩이 적용되면 컨텐츠 영역 + 패딩 영역이 적용됨 (원하지 않는다면 box-sizing을 border-box로 지정)
 
auto ?
 

11.4 콘텐츠 오버플로

(포지션인데 왜..?)
visible : hidden | scroll | auto(-> 스크롤 바는 필요할 때만 사용)
 
요소의 크기 < 콘텐츠 크기
 

11.5 요소 가시성

visibility(레이아웃에 영향이 있다) 보이지 않을 뿐 영역을 차지함
[ <-> display : none은 문서에서 제거함 ]
 
 
11.6.1 포함하는 블록과 absolute 포지션이 지정된 요소
문서 흐름에서 완전히 제거된다.
 
parent가 relative인 경우와 static인 경우(지정 안한 경우)

마진이랑 탑바텀레프트라이트 관계?
 
staic과 relative
=> 왜? absolute를 쓰면 relative?
=> relative는 아무 값도 주지 않으면 static과 동일한가?
  => 특별한 위치 값이 없다면 일반적으로 같은 위치에 배치된다.
단, static의 경우 위치 속성 top bottom right left가 영향을 미치지 않음 (relative는 영향을 받는다)
=> absolute 포함하는 블록이 relative 이거나 absolute 일 때 모두 같은 효과인가?
 
auto??
left auto라면 width와 right 를 기준으로 자동으로 채워지는 것?
 
11.6.6 z축의 위치
스태킹
값이 높을수록 사용자에게 가깝다
만약 지정하지 않는다면 auto.
값읊 지정하면 자신만의 로컬 스택 기준을 갖는다.(조상 요소 기준)
=> 명세서에는 자식이 부모뒤로 가지 못하게 했다.
 
11.7 fixed 포지션
뷰포트 기준
문서 흐름에서 완전히 벗어난다.

11.7 relative
원래 문서 흐름에 배치되어야 하는 곳에 빈 공간이 생기고 오프셋만큼 움직여서 다른 위치에 배치된다
 top  10px bottom 10px이면? bottom -10px

11.8 sticky
z-index
overflow: scroll

있다가 없어짐 ㅡ 상단에 달라붙는다
리스트처럼 스크롤될 때
흠 그럼 다음 요소도 스티키라면? 위에껀 사라지나?
서로의 위에 쌓인다!