다양한 CSS 위치 지정 방법의 차이점

static: static positioning은 position의 기본값입니다. 요소 상자는 정상적으로 생성됩니다. 즉, positioning 없이 정상적으로 표시됩니다.

Relative: 상대 위치 지정

사용법 1: 요소가 원래 위치를 기준으로 특정 거리만큼 오프셋되어 있지만 원래 공간은 그대로 유지되어 공백으로 나타납니다.

사용법 2: 요소를 position:relative로 설정하여 요소의 하위 요소를 요소에 절대적으로 상대적으로 배치합니다.

절대: 절대 위치

요소는 문서 흐름에서 제거되고 포함 블록을 기준으로 배치됩니다. 요소는 원래 공간에서 닫혀 있습니다. 원래 인라인 요소인지 블록 수준 요소인지에 관계없이 요소가 배치된 후에 블록 수준 상자가 생성됩니다.

포함 블록: 가장 가까운 위치 값은 정적 조상 요소(블록 수준 또는 인라인)가 아닙니다. 일반적으로 요소는 절대 위치 요소의 포함 블록으로 지정되며 해당 위치가 설정됩니다. 편향 없이 상대적으로.

고정: 고정 위치 지정

요소는 문서 흐름에서 제거되고 브라우저 창을 기준으로 위치가 지정되므로 문서가 스크롤될 때 움직이지 않습니다. 요소는 원래 공간에서 닫혀 있습니다. 원래 인라인 요소인지 블록 수준 요소인지에 관계없이 요소가 배치된 후에 블록 수준 상자가 생성됩니다. 절대 위치 지정과의 유일한 차이점은 포함 블록입니다.

포함 블록: 브라우저 창.

절대/고정 및 부동 소수점 비교

유사: 요소는 문서 흐름에서 삭제되지만 여전히 블록 수준 상자의 레이아웃에 영향을 미칩니다. 원래 블록 수준 요소인지 여부에 관계없이 생성됩니다.

차이점: float의 포함 블록은 가장 가까운 블록 수준 상위 요소입니다.

오프셋 속성: 위쪽/오른쪽/아래쪽/왼쪽, 초기 값은 자동입니다.

위치 위치 지정을 사용한 후에는 오프셋 속성을 사용하여 포함 블록을 기준으로 한 오프셋인 오프셋을 정의해야 합니다. 위치 값이 정적이 아닌 요소에 적용됩니다.

너비와 높이를 정의해야 하는 경우도 있지만 실제로는 4개의 오프셋 속성이 요소의 크기를 정의하므로 오프셋 속성 정의와 충돌할 수 있습니다. 이때, width 및 left 속성에 따라 왼쪽과 오른쪽이 정의되고, top 및 height 속성에 따라 위쪽과 아래쪽이 정의됩니다.

콘텐츠 오버플로 오버플로: 표시/숨김/스크롤/자동/상속, 초기 값이 표시됩니다.

요소의 크기는 고정되어 있지만 내용이 맞지 않아 오버플로가 발생합니다. 오버플로 부분의 가시성, 보이지 않음(숨김), 스크롤 가시성(스크롤)을 제어합니다.

요소 가시성 가시성: 표시/숨김/접기/상속, 초기값이 표시됩니다.

visible:hidden과 display:none의 차이점: visible:hidden은 요소를 표시하지 않도록 설정하지만 요소는 여전히 레이아웃에 영향을 주지만 요소는 디스플레이에서 부분적으로 공백으로 렌더링됩니다. 없음 요소는 표시되지 않고 문서에서 제거됩니다. 흐름에서 삭제되면 문서 레이아웃에 영향을 주지 않습니다.