절대/고정 위치 요소가 잘못된 위치에 있는 이유는 무엇입니까?

잘못 배치된 절대/고정 요소의 미스터리: 위치 및 컨텍스트 이해

CSS 레이아웃에서 절대적 또는 고정 요소의 동작 이해- 배치된 요소가 중요합니다. 그러나 이와 관련하여 문제가 발생했으며 그 이유를 밝히기 위해 왔습니다. 구체적인 내용을 살펴보겠습니다.

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

회색 상자가 컨테이너의 왼쪽 상단에 위치하도록 기대했습니다. , 그러나 결국 외부에 배치되었습니다. 그 이유는 적용한 속성에 있습니다.

• 회색 상자의 위치는 절대입니다. 이렇게 하면 위치가 상위 요소와 독립적이 됩니다.
• 그러나 상위 요소인 컨테이너의 위치는 상대입니다. 이는 회색 상자에 대한 새로운 위치 지정 컨텍스트를 생성합니다.
• 이 위치 지정 컨텍스트 내에서 회색 상자의 위쪽: 0 및 왼쪽: 0 값은 현재 위치에서 상위 항목의 왼쪽 상단 모서리를 기준으로 합니다.
• 그러나 주황색 상자의 top: 100px 속성에 지정된 대로 컨테이너의 상단 여백은 100px입니다. 이로 인해 상위 항목의 왼쪽 상단 모서리와 실제 시각적 위치 사이에 간격이 생기고 결과적으로 회색 상자가 표시 영역 외부에 배치됩니다.

사례 2: 회색 상자가 주황색 상자로 대체되었습니다.

두 번째 경우, 회색 상자를 컨테이너 내 두 번째 자식으로 이동하면 주황색 상자를 따라 오른쪽으로 이동하는 것처럼 보였습니다. 상자. 그 이유는 다음과 같습니다.

• 주황색 상자의 위치: 상대는 새로운 위치 지정 컨텍스트를 설정합니다.
• 이 컨텍스트 내에서 회색 상자의 상단: 0 및 왼쪽: 0 값은 주황색 상자의 왼쪽 상단 모서리를 기준으로 합니다.
• 주황색 상자의 왼쪽: 100px 속성은 주황색 상자를 결과적으로 회색 상자는 이 변위를 따르며 오른쪽으로 이동된 것처럼 보입니다.

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