CSS에서 절대 위치에 겹치는 요소를 수직으로 쌓는 방법은 무엇입니까?

수직 스택에 대한 절대 위치 중복 요소 해결

CSS에서는 위치 속성을 상대값, 절대값, 고정값 등 다양한 값으로 설정할 수 있습니다. 요소가 절대적으로 배치되면 일반 문서 흐름에서 제거되고 가장 가까운 위치의 조상 또는 뷰포트를 기준으로 배치됩니다. 이 동작으로 인해 요소가 서로 겹쳐질 수 있으며 이는 원하는 효과가 아닐 수 있습니다.

요소 위치 이해

• 정적(기본값): 요소는 문서 흐름에서 일반적으로 쌓입니다.
• 상대: 요소는 문서 흐름에 남아 있습니다. 하지만 위치는 위쪽, 오른쪽, 아래쪽, 왼쪽을 사용하여 조정할 수 있습니다.
• 절대: 요소는 문서 흐름에서 제거되고 가장 가까운 위치의 상위 항목을 기준으로 배치됩니다.

절대적으로 위치하는 요소 겹침

다음 예에서 클래스가 있는 요소는 .row 및 .col은 절대적 위치에 있으므로 겹쳐지게 됩니다.

body {
  position: relative; /* Contains absolutely positioned elements */
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1, .col2 {
  position: absolute;
}

이 문제를 해결하고 요소를 수직으로 쌓으려면 높이를 지정하고 수직 위치가 올바르게 관리되는지 확인해야 합니다.

위치 속성을 제거하지 않는 솔루션

요소의 CSS를 수정하는 것이 이상적이지는 않지만 위치 속성을 제거하지 않고 가능한 솔루션은 다음을 지정하는 것입니다. 각 .row의 높이를 조정하고 첫 번째 .row의 높이를 고려하여 두 번째 .row의 상단 속성을 조정합니다.

body {
  /* position: relative; remains unchanged */
}

.container {
  /* position: absolute; remains unchanged */
}

.row {
  position: relative;
  height: 2em; /* Specify height for vertical stacking */
}

.col1, .col2 {
  /* position: absolute; remains unchanged */
}

#row2 {
  top: 2em; /* Offset to account for the height of #row1 */
}

솔루션 이해

• 우리는 요소의 절대 위치 지정.
• 각 행의 높이를 지정하여 수직을 허용합니다. stacking.
• 두 번째 .row(#row2)의 상단 속성을 조정하여 첫 번째 .row(#row1)의 높이로 오프셋합니다.

고려 사항

• .row 요소의 높이가 정확하고 패딩이나 패딩이 포함되어 있는지 확인하세요. margin.
• 이 솔루션은 높이를 알 수 없는 동적으로 생성된 콘텐츠에는 적합하지 않을 수 있습니다.
• 복잡한 동작으로 이어질 수 있으므로 일반적으로 여러 개의 중첩된 절대 위치 요소를 사용하는 것은 권장되지 않습니다.

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