오프셋이 지정되지 않은 경우 절대 위치 요소는 어디로 이동합니까?

위치: 절대 기본 정렬

위치: 절대를 사용하는 경우 요소는 포함 블록을 기준으로 배치됩니다. 그러나 특정 오프셋이 제공되지 않으면 기본값이 적용됩니다.

나서 보니 position:absolute의 기본값은 top:0이 아닙니다. 왼쪽: 0이지만 자동입니다. CSS 사양에 따르면 세 가지 오프셋(상단, 너비, 오른쪽)이 모두 자동으로 설정되면 요소는 "정적 위치"로 유지됩니다.

정적 위치 지정

정적 위치는 마치 절대적으로 위치가 지정되지 않은 것처럼 레이아웃에서 요소의 자연스러운 위치를 나타냅니다. 절대 위치 요소의 경우 포함 블록이 정적 위치의 너비를 결정합니다.

가로 정렬

왼쪽, 너비, 오른쪽이 모두 자동으로 설정된 경우, 요소의 너비는 "맞게 축소"됩니다. 즉, 콘텐츠를 수용하는 데 필요한 너비를 사용한다는 의미입니다. 그런 다음 요소가 포함 블록 내에서 올바르게 배치되었는지 확인하기 위해 왼쪽 오프셋이 계산됩니다.

세로 정렬

마찬가지로 위쪽, 높이, 아래쪽이 설정된 경우 자동의 경우 요소의 높이는 해당 내용을 기반으로 합니다. 그런 다음 포함 블록 내에서 올바른 위치를 지정하기 위해 상단 오프셋이 계산됩니다.

예

제공된 HTML 코드에서 h1 요소는 명시적인 오프셋 없이 절대적으로 배치됩니다. :

h1 {
  position: absolute;
}

기본적으로 h1 요소는 포함 블록의 상단에 있는 정적 위치에 유지됩니다. 이 경우 포함 블록은

이므로 h1 요소는 페이지 상단에 위치하며 왼쪽 여백에 맞춰 정렬됩니다.

결론

지정된 오프셋 없이 position:absolute를 사용하는 경우 요소의 기본 위치는 포함 블록과 콘텐츠에 따라 결정되므로 레이아웃에서 적절한 정렬이 보장됩니다.

위 내용은 오프셋이 지정되지 않은 경우 절대 위치 요소는 어디로 이동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!