CSS에서 절대 요소가 겹치는 것을 방지하는 방법은 무엇입니까?

Absolute Elements' Vertical Overlap: A Solution

HTML 코드에서 #row1과 #row2라는 두 행을 정의했습니다. 절대 위치. 문제는 일반적인 문서 흐름에서 절대 요소가 제거되고 서로 겹쳐서 내용이 겹치기 때문에 발생합니다.

이를 해결하려면 절대 위치 지정의 목적과 동작을 이해해야 합니다. 요소를 위치: 절대;로 설정하면 표준 흐름에서 요소를 제거하고 가장 가까운 위치에 있는 조상을 기준으로 위치를 지정합니다.

귀하의 예에서 .row 및 .col1, .col2는 중첩된 절대 요소입니다. .container 역시 절대적입니다. 그러나 세 가지 요소는 모두 절대적이므로 모두 독립적이 되고 중첩됩니다.

이 문제를 해결하려면 적절한 위치 계층 구조를 구축해야 합니다. .row를 상대 위치 지정으로 설정하면 이를 달성할 수 있습니다. 이렇게 하면 .col1 및 .col2가 절대적으로 유지되지만 문서 흐름에 있는 .row를 기준으로 위치가 지정됩니다.

이 변경을 통해 #row1 및 #row2가 일반 경로를 존중하면서 수직으로 쌓일 수 있습니다. 블록 요소 동작. 수정된 CSS는 다음과 같습니다.

body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}

이 수정은 #row1과 #row2가 예상대로 서로 아래에 표시되도록 하면서 필요한 위치 지정 속성을 유지합니다.

위 내용은 CSS에서 절대 요소가 겹치는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!