절대 위치에 있는 요소가 때때로 잘못 정렬되어 나타나는 이유는 무엇입니까?

절대 위치 요소의 기본 위치 이해

position: 절대 속성을 사용할 때 잘못 정렬된 요소와 관련된 문제가 발생하는 것이 일반적입니다. 이는 이러한 속성의 기본값이 예상과 다를 때 발생합니다.

HTML에서는 절대 위치에 있는 요소가 주변 콘텐츠에 영향을 주지 않고 배치됩니다. 그러나 기본적으로 위쪽, 왼쪽, 아래쪽 및 오른쪽 값은 0으로 설정되어 있지 않습니다.

기본값

대신 이러한 모든 속성의 기본값은 auto입니다. 즉, 요소의 위치는 비정적 위치를 갖는 가장 가까운 상위 요소인 포함 블록을 기준으로 계산됩니다.

세 가지 속성(왼쪽, 너비, 오른쪽)이 모두 자동으로 설정된 경우, 요소의 위치는 정적 위치를 기준으로 결정됩니다. 즉, 절대적 위치가 아닌 경우 원래 위치입니다.

CSS 사양(섹션 10.3.7)에 따르면:

세 가지 모두 'left', 'width' 및 'right'는 'auto'입니다. 먼저 'margin-left' 및 'margin-right'에 대한 'auto' 값을 0으로 설정합니다. 그런 다음, 정적 위치 포함 블록을 설정하는 요소는 'ltr'이며 '왼쪽'을 정적 위치로 설정하고 아래 규칙 번호 3을 적용합니다. 그렇지 않으면 '오른쪽'을 정적 위치로 설정하고 아래 규칙 1번을 적용합니다.

마찬가지로 수직 치수의 경우 속성(상단, 높이, 하단)은 다음과 같이 계산됩니다(섹션 10.6.4).

'top', 'height', 'bottom' 세 개가 모두 자동인 경우 'top'을 정적 위치로 설정하고 아래 세 번째 규칙을 적용합니다.

간단히 말하면, 기본 위치는 절대 위치에 있더라도 레이아웃에서 요소의 원래 위치입니다.

위 내용은 절대 위치에 있는 요소가 때때로 잘못 정렬되어 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!