Display

• position을 absolute나 fixed로 변경하거나 float 속성을 left나 right로 변경하면, 자동으로 display가 block으로 변경된다.
• display inline을 사용하면, 너비와 높이, 수직마진을 적용할 수 없다. (수직패딩도 적용은 되나 다른 요소를 밀어내지 못한다.)
• display block을 사용하면, 너비와 높이 수평수직 패딩 마진 모두 적용 가능. (수직마진은 서로 중첩된다.)
• display inline-block을 사용하면, 흐름 방향은 수평이지만, 높이/너비 모두 적용가능하나, 수직마진이 서로 중첩되지 않는다.
• display none을 사용하면, 어떤 장치도 표시하거나 접근할 수 없음.

Lv3에서 새로 추가된 Display값

• display flow-root를 활용하면, 해당 요소가 블록 컨테이너가 된다. 포함한 float 요소는 컨테이너 끝에서 clear되며(float가 자동으로 해제되며), 부모-자식 요소의 수직마진을 병합하지 않는다.
  
• display flex를 적용하면, 포함된 아이템을 1차원 기반으로 배치한다. 격자에 구애받지 않고, 일부만 가운데 정렬하는 것은 flex에서만 가능.
• display grid를 적용하면, 포함된 아이템을 2차원 기반으로 배치한다. 셀의 병합기능은 grid에서만 가능.

Position

• position static을 활용하면, 배치 기준이 없다는 것이며, 흐름에 따라 배치된다. left, right, top, bottom,z-index 활용불가.
• position relative를 활용하면, 박스의 현재 위치가 배치의 기준이되며, 배치를 변경할 때 다른 박스의 흐름을 깨지 않는다. (다른 박스를 밀어내지 않는다.) 자식 또는 자손 요소의 absolute 배치 기준이 된다. (left, right, top, bottom,z-index, inset 모두 활용가능.)
• position absolute를 활용하면, 일반적인 흐름에서 완전히 이탈하며, 부모, 형제의 크기나 위치에 전혀 영향을 미치지 않는다. 조상 박스가 relative, absolute, fixed, transform일 때, 조상 기준으로 배치한다. (배치 기준이 자기 자신이 아님. 조상을 거슬러 올라가면서 relative, absolute, fixed, transform속성이 들어간 부모를 찾음. / Inset 0, margin auto 박스 가운데 정렬)
• position fixed를 활용하면, 뷰포트가 배치의 기준이된다. 조상 요소에 transform 속성이 있으면 transform 속성이 있는 요소가 배치기준이 된다.
• position sticky를 활용하면, 스크롤 포트가 배치기준이된다. 부모 요소가 스크롤 포트에 보이는 동안 스크롤 포트 기준으로 고정. 부모 요소가 스크롤밖으로 이탈하면 고정을 멈춤. (세 가지 조건이 필요함. 자기 자신, 자기자신을 포함하는 스크롤바가 있는 박스와 그 밖의 박스) fixed와 static의 상태를 오간다.
• z-index는 부모 요소에 종속된다.