'위치: 절대' 속성의 기본값은 무엇이며 왜 정렬 불량이 발생합니까?
- Barbara Streisand원래의
- 2024-11-07 09:43:02595검색
위치 기본값: 예상치 못한 오정렬 시 절대
웹 개발 프로젝트에서 개발자는 절대 위치 지정을 사용하는 동안 요소 오정렬 문제가 가끔 발생합니다. 해결 방법으로 명시적 매개 변수 없이 position:absolute를 설정하면 문제가 해결되는 경우가 있습니다. 이로 인해 이러한 매개변수의 기본값이 무엇인지에 대한 의문이 제기됩니다.
절대 위치 지정은 개념적으로 요소를 포함하는 블록과 관련하여 요소를 배치하지만 위쪽, 왼쪽, 아래쪽 및 오른쪽 속성의 기본값은 그렇지 않습니다. 직관적이다. 예상과는 달리 0으로 설정되지 않습니다.
CSS Working Group의 레벨 3 사양에 지정된 대로 이러한 모든 속성의 기본값은 auto입니다. 이는 요소가 절대 위치가 아닌 것처럼 정적 위치에 남아 있음을 의미합니다.
예를 들어 다음 코드를 고려해보세요.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
position:absolute;
}
</style>
</head>
<body>
<h1>Absolute pos</h1>
<p>Paragraph</p>
</body>
</html>
명시적인 위치 지정이 없으면 h1 요소는 원래 위치에 유지됩니다.
[레이아웃의 왼쪽 상단에 위치한 h1 요소의 이미지]
절대 위치에 있는 요소의 위치는 다음 제약 조건에 따라 결정됩니다.
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
'left', 'width', 'right' 세 가지가 모두 'auto'인 경우 'left' 값은 정적 위치로 설정됩니다. 마찬가지로 수직 위치 지정은 다음으로 제한됩니다.
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
'top', 'height', 'bottom' 세 개가 모두 'auto'인 경우 'top' 값은 정적 위치로 설정됩니다. .
결론적으로 명시적인 값 없이 절대 위치 지정을 사용하면 요소는 정적 위치에 유지됩니다. 이 동작은 예상치 못한 것처럼 보일 수 있지만 CSS 사양에 문서화되어 있습니다. 이러한 기본값을 이해하면 정렬 문제를 방지하고 복잡한 웹 레이아웃에서 정확한 위치를 지정하는 데 도움이 됩니다.
위 내용은 '위치: 절대' 속성의 기본값은 무엇이며 왜 정렬 불량이 발생합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!