절대/고정 위치 요소가 오프 위치로 표시되는 이유는 무엇입니까?

절대/고정 위치 요소 오프 위치

CSS 위치 지정에서 절대 및 고정은 혼동되어 정렬 불량으로 이어질 수 있습니다. 여기서는 그러한 요소가 예상대로 표시되지 않을 수 있는 이유를 설명합니다.

사례 1: 상대 상위 외부의 절대 회색 상자

요소가 절대 위치에 있을 때 해당 위치는 다음과 같습니다. 비정적 위치를 가진 가장 가까운 조상을 기준으로 취합니다. 이 경우 상위 .container의 위치는 상대입니다. 그러나 절대 회색 상자는 상단이 자동(기본값)으로 설정되어 있으므로 컨테이너 외부에 있습니다.

CSS 사양에 따라 상단과 하단이 자동이고 높이가 자동이 아닌 경우 상단이 설정됩니다. 정적 위치로. 이 위치는 요소의 절대 위치가 아닌 경우 요소의 위치에 따라 결정됩니다.

이 경우 회색 상자의 정적 위치는 앞에 여백이나 패딩이 없기 때문에 컨테이너 외부에 있습니다. 따라서 회색 상자는 컨테이너가 아닌 문서 본문의 왼쪽 상단에 위치합니다.

사례 2: 회색 상자가 주황색 상자 뒤 왼쪽 상단에 없음

회색 상자를 두 번째 위치로 옮기면 주황색 상자가 남긴 공간 뒤에 위치하게 됩니다. 이는 주황색 상자에 새로운 스택 컨텍스트를 생성하는 위치: 상대가 있기 때문입니다.

스태킹 컨텍스트 내의 요소는 해당 컨텍스트 내에서 가장 가까운 위치에 있는 조상을 기준으로 배치됩니다. 회색 상자는 컨테이너의 스태킹 컨텍스트 내에서 다음으로 배치되는 요소이기 때문에 주황색 상자 뒤에 배치됩니다.

결론

절대 및 고정 위치 지정에 적용되는 규칙을 이해하는 것은 정확한 요소 배치에 중요합니다. 정적 위치, 스택 컨텍스트, 배치된 요소와 배치되지 않은 요소 간의 관계를 고려하여 개발자는 요소가 의도한 대로 배치되도록 할 수 있습니다.

위 내용은 절대/고정 위치 요소가 오프 위치로 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!