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

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

상대: 상대 위치 지정

사용법 1: 요소는 원래 위치를 기준으로 특정 거리만큼 오프셋됩니다. , 그러나 원래 공간은 여전히 ​​유지되며 공백으로 나타납니다.

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

절대: 절대 위치 지정

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

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

고정: 고정 위치

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

포함 블록: 브라우저 창.

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

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

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

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

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

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

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

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

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

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