명시적인 위쪽, 왼쪽, 아래쪽, 오른쪽 값 없이 요소를 절대적으로 배치할 수 있습니까?

명시적인 위쪽/왼쪽/아래쪽/오른쪽 값 없이 요소 배치: 표준 살펴보기

웹 개발 영역에서, 절대 위치 지정을 사용하면 문서의 일반적인 흐름과 관계없이 요소를 배치할 수 있습니다. 그러나 위쪽/왼쪽/아래/오른쪽 속성을 명시적으로 설정하지 않고 이를 달성하려고 하면 일반적인 질문이 발생합니다.

자동 값의 기본 동작

에 따르면 CSS2 사양에서는 위쪽/아래쪽, 왼쪽/오른쪽 속성의 자동 값에 대한 기본 동작은 정적 위치에 있는 것과 동일한 값을 할당하는 것입니다. 이는 위치: 절대 및 4개 자동 값이 모두 정적으로 배치된 것처럼 동작한다는 의미입니다.

사례 #1: WordPress 헤더의 사진 위에 로고

첫 번째 경우, 로고 요소가 상위 컨테이너(헤더)의 첫 번째 하위 요소이기 때문에 명시적인 위쪽/왼쪽/아래/오른쪽 값 없이 사진 바로 위에 로고를 배치할 수 있습니다. CSS 표준에 따르면 여백(또는 패딩)이 있는 절대 위치의 첫 번째 자식은 부모의 왼쪽 상단 모서리를 기준으로 이동됩니다.

사례 #2: 수평 다단계 메뉴

두 번째 경우에는 display: table-*를 사용하여 수평 다단계 메뉴를 배치할 수 있지만 표 셀은 상대 위치 지정을 지원하지 않습니다. 그러나 메뉴 항목에서 position:absolute를 사용하고 위쪽/아래쪽, 왼쪽/오른쪽 속성을 자동으로 두면 기본 동작을 통해 이러한 항목이 정적 위치 값에 따라 배치되어 테이블 셀 내에서 상대 위치 지정을 효과적으로 에뮬레이션할 수 있습니다. context.

브라우저 호환성

이 기술은 CSS2 사양을 준수하고 이론적으로는 작동하지만 브라우저는 명시적인 상단 없이 절대 위치 지정을 지원한다는 점에 유의하는 것이 중요합니다. /왼쪽/아래/오른쪽 값은 다를 수 있습니다. Firefox 0.8 및 IE6-7과 같은 일부 이전 브라우저에서는 예기치 않은 동작이 나타날 수 있습니다. 그럼에도 불구하고 특정 상황에서는 유연성을 제공할 수 있는 유효한 접근 방식으로 남아 있습니다.

위 내용은 명시적인 위쪽, 왼쪽, 아래쪽, 오른쪽 값 없이 요소를 절대적으로 배치할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!