절대/상대 위치를 제거하지 않고 절대 위치 요소를 수직으로 쌓는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-12-25 07:54:12

원래의

614명이 탐색했습니다.

How to Stack Absolutely Positioned Elements Vertically Without Removing Absolute/Relative Positioning?

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

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

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

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

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

로그인 후 복사

그리고 해당 HTML:

<body>
  <div class="container">
    <div>

로그인 후 복사

이 설정의 의도는 두 개의 .row 요소가 겹치지 않고 수직으로 쌓이도록 하는 것입니다. 지금처럼 서로. 절대/상대 위치 지정 속성을 제거하지 않고 어떻게 이를 달성할 수 있습니까?

CSS 위치 지정 이해

해결책을 찾으려면 다양한 유형의 CSS 위치 지정을 이해하는 것이 중요합니다. :

정적: 요소는 일반적으로 문서의 레이아웃.
상대: 요소는 위쪽, 오른쪽, 아래쪽 및 왼쪽 오프셋을 기준으로 이동하지만 문서 흐름에는 유지됩니다.
절대: 요소는 문서 흐름에서 제거되고 가장 가까운 위치에 있는 조상을 기준으로 위치가 지정됩니다. 상위).
고정: 요소는 문서 흐름에서 제거되고 뷰포트를 기준으로 위치가 지정되며 페이지와 함께 스크롤됩니다.

문제 요소가 겹치는 경우

이 예에서는 .row 및 .col 요소는 절대 위치에 있습니다. 이는 해당 문서가 일반적인 문서 흐름에서 벗어나 서로 쌓이는 것을 의미합니다. 이 문제를 해결하려면 특정 레이아웃 목적에 맞게 절대 위치를 유지하면서 문서 흐름에 유지하는 방법을 찾아야 합니다.

해결책: 이중 중첩

정통적이지 않지만 효과적인 솔루션 중 하나는 행을 배치하는 두 번째 컨테이너 요소를 만드는 것입니다. 절대적으로:

<body>
  <div class="container">
    <div class="inner-container">
      <div>

로그인 후 복사

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

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

로그인 후 복사

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

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

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