절대/상대 위치를 제거하지 않고 절대 위치 요소를 수직으로 쌓는 방법은 무엇입니까?

위치 딜레마: 절대 위치 지정으로 요소 겹치기

웹 디자인에서 절대 위치 지정을 사용하면 특정 요소 레이아웃을 만드는 데 유용할 수 있습니다. 그러나 특히 요소를 수직으로 하나씩 쌓으려고 할 때 문제가 발생할 수도 있습니다.

다음 CSS 스니펫을 고려하세요.

body {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

그리고 해당 HTML:

  <div class="container">
    <div>
<p>이 설정의 의도는 두 개의 <strong>.row</strong> 요소가 겹치지 않고 수직으로 쌓이도록 하는 것입니다. 지금처럼 서로. 절대/상대 위치 지정 속성을 제거하지 않고 어떻게 이를 달성할 수 있습니까?</p>
<p><strong>CSS 위치 지정 이해</strong></p>
<p>해결책을 찾으려면 다양한 유형의 CSS 위치 지정을 이해하는 것이 중요합니다. :</p>
<ul>
<li>
<strong>정적</strong>: 요소는 일반적으로 문서의 레이아웃.</li>
<li>
<strong>상대</strong>: 요소는 위쪽, 오른쪽, 아래쪽 및 왼쪽 오프셋을 기준으로 이동하지만 문서 흐름에는 유지됩니다.</li>
<li>
<strong>절대</strong>: 요소는 문서 흐름에서 제거되고 가장 가까운 <strong>위치에 있는 조상</strong>을 기준으로 위치가 지정됩니다. 상위).</li>
<li>
<strong>고정</strong>: 요소는 문서 흐름에서 제거되고 뷰포트를 기준으로 위치가 지정되며 페이지와 함께 스크롤됩니다.</li>
</ul>
<p><strong>문제 요소가 겹치는 경우</strong></p>
<p>이 예에서는 <strong>.row</strong> 및 <strong>.col</strong> 요소는 절대 위치에 있습니다. 이는 해당 문서가 일반적인 문서 흐름에서 벗어나 서로 쌓이는 것을 의미합니다. 이 문제를 해결하려면 특정 레이아웃 목적에 맞게 절대 위치를 유지하면서 문서 흐름에 유지하는 방법을 찾아야 합니다.</p>
<p><strong>해결책: 이중 중첩</strong></p>
<p>정통적이지 않지만 효과적인 솔루션 중 하나는 행을 배치하는 두 번째 컨테이너 요소를 만드는 것입니다. 절대적으로:</p>
<pre class="brush:php;toolbar:false">
  <div class="container">
    <div class="inner-container">
      <div>
<pre class="brush:php;toolbar:false">.container {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

이러한 이중 중첩을 통해 .inner-container는 이제 .row에 대해 가장 가까운 위치에 있는 조상 역할을 합니다. 요소. 결과적으로 행이 수직으로 쌓이면서 원래 레이아웃을 유지하면서 겹치는 문제를 해결합니다.

참고: 이 솔루션은 원하는 수직 스택을 달성하는 동시에 다른 레이아웃 목적을 위한 절대 위치를 유지합니다. 강요. 그러나 일반적인 사용에는 권장되지 않으며 절대/상대 위치 지정을 제거할 수 없는 경우 최후의 수단으로 사용해야 합니다.