CSS에서 z-index를 사용하여 상위 요소 위에 하위 요소를 배치하는 방법은 무엇입니까?

z-Index를 사용하여 상위 요소 위에 하위 요소 높이기

HTML에서 요소는 DOM(문서 개체 모델)이라는 계층 구조를 따릅니다. 여러 개의 겹치는 요소가 있는 경우 해당 요소의 z-index 속성에 따라 어떤 요소가 맨 위에 표시되는지가 결정됩니다.

다음 HTML 코드를 고려하세요.

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

"하위" div가 표시되기를 원한다고 가정합니다. "전체 페이지" div 위에 있습니다. 그러나 기본적으로 "상위" div의 Z-색인은 모든 하위 요소에 영향을 미칩니다.

// Wrong approach
.parent {
  z-index: 100;
  position: relative;
}

// Incorrect output: "child" is hidden behind "wholePage"

해결책:

제공된 답변에서 언급했듯이 CSS만 사용하면 자식의 z-index를 부모의 z-index보다 높게 설정할 수 없습니다. 그러나 두 가지 해결 방법이 있습니다:

1. 상위에서 z-index 제거:

"상위" div에서 z-index 속성 제거:

.parent {
  position: relative;
}

이렇게 하면 "하위" div가 자체 z를 상속할 수 있습니다. -index는 "wholePage"보다 높게 설정할 수 있습니다.

2. 자식 대신 형제 만들기:

"부모" div의 자식이 되는 대신 "자식" div를 "wholePage"의 형제로 만들고 그에 따라 Z-색인을 설정합니다.

<div class="sibling">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

.sibling {
  position: absolute;
  z-index: 100;
}

.child {
  position: absolute;
  z-index: 150;
}

이 경우 "child"와 "wholePage"는 모두 형제이고 "child" div가 더 높습니다. z-index는 그것이 맨 위에 나타나도록 보장합니다. "위치: 절대;"를 사용한다는 점에 유의하세요. "위치: 상대;" 대신 이러한 맥락에서 자식이 부모 흐름 외부에 위치할 수 있습니다.

위 내용은 CSS에서 z-index를 사용하여 상위 요소 위에 하위 요소를 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!