레이아웃

1. display

2. float

3. position

4. overflow

5. z-index

1. display

요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지를 정하며, flow, grid, flex 처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.
inline : 영역의 크기가 내부 콘텐츠 크기로 정해진다. 여러 요소가 가로 배치가 된다.
block : 영역의 크기를 width, height로 지정할 수 있다. width를 지정하지 않으면 가로 전체를 차지한다. 여러 요소가 세로 배치가 된다.
inline-block : 영역의 크기를 width, height로 지정할 수 있다. 여러 요소가 가로 배치가 된다. margin, padding 등도 설정할 수 있다.
none : 해당 요소를 없앤다.
- visibility: hidden과의 차이점 : 요소 자체를 없애기 때문에 박스도 사라지게 된다. visibility: hidden의 경우 내용만 사라지고 레이아웃은 남아있다.

span {
  display: inline-block;
  width: 100px;
  height: 50px;

  background-color: blue;
}

.image {
  float: left;

  width: 100px;
  height: 100px;
  background-color: blue;
}

문서 상에 요소를 배치하는 방법을 지정
static : 기본값. 일반적인 흐름에 따라 배치. top, right, bottom, left, z-index 속성이 영향을 주지 않는다.
relative : 요소를 일반적인 흐름에 따라 배치하며 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
absolute : 요소를 일반적인 흐름에서 제거하고 static이 아닌 부모를 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
fixed : 요소를 일반적인 흐름에서 제거하고 뷰포트의 초기 컨테이닝 블록을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
sticky : 요소를 일반적인 흐름에 따라 배치하며 가장 가까운 스크롤 되는 조상을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. 특정 위치를 지나면 해당 자리에 고정이 된다.