[CSS] document flow/ float / position / z-index

document flow(문서 대열)

float
해당 속성을 적용받는 요소들은 block으로 바뀌지만 속성은 inline-block 속성으로 바뀐다.
기본적인 마진값이 없다.

참고 :https://velog.io/@jivyyyy/CSS-box-model-float-flex
https://velog.io/@kim98111/float-%EC%86%8D%EC%84%B1

display:inline-block
기본적인 마진값이 있다.

overflow:hidden
자식요소에 float를 주게 되면 부모요소에서는 자식요소가 인식되지 않기때문에
높이나 넓이가 부모요소 크기로 돌아가게 된다.
이때 부모요소에 overflow:hidden을 사용하게 되면 자식으로 인식하게 되어 자식요소가 포함된 높이와 넓이를 갖게 된다.

block formatting context와 연관이 되어 있으므로 정확히 파악하기

참고사이트: https://simsimjae.tistory.com/334
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context

position

static: 기본값

relative: 요소를 현재위치를 기준으로 상대적으로 배치시킴
해당 요소를 이동시키더라도 해당 요소가 원래 있던 자리는 빈공간으로 인식하지 않아 다른 요소가 차지하지 않는다.
(예: 원래위치로부터 왼쪽으로 40px만큼 이동)

absolute: 상위 요소(부모 요소)를 기준으로 요소를 배치시킴(position:static 요소는 아님), 일반적으로 position:realtive를 부모 요소 기준으로 삼음, 부모 요소를 따로 설정하지 않으면 body요소가 배치 기준이 됨

※ float와의 차이 : 바로 위의 부모 요소에만 종속
해당 속성을 주면 block형태로 바뀐다.

fixed: 요소를 고정시켜서 배치, 뷰포트를 기준으로 요소를 배치시킴
(absolute,fixed는 요소가 독립이 되어 다른요소들과 상호작용을 하지 않음)
(요소에 속성 position:absolute, fixed를 주게되면 inline-block 타입으로 바뀜)

sticky: 화면을 스크롤했을때 화면에 요소를 고정시키는 속성(풀 페이지 등에서 섹션 영역마다 다른요소를 고정시켜야하는 경우 사용)
(fixed는 viewport에 고정 되어 스크롤을 내려도 원하는 위치 고정. sticky는 스크롤을 따라 움직이다 특정 위치에 offset에 닿으면 그 순간부터 fixed처럼 고정. 처음에 relative 속성처럼 동작하다가 스크롤이 특정 지점에 도달하면 fixed 속성으로 동작)

z-index

relative 나 absolute에서만 동작
relative가 absolute보다 우선
absoulte가 여러개 있을 경우 html 요소가 나중에 나온 것이 우선

참고 : https://dev4self.tistory.com/35#--%--Static%---%EA%B-%B-%EB%B-%B-%EA%B-%---
https://velog.io/@frenchkebab/CSS-3-Position-1-Position-이란
https://velog.io/@kim98111/float-속성
https://emunhi.com/view/201807/31135011071?menuNo=10002