`display: none`으로 상위 요소가 숨겨져 있을 때 하위 요소를 표시하는 방법은 무엇입니까?

상위 요소가 숨겨져 있을 때 HTML 하위 요소 표시

상위 요소가 표시: 없음으로 설정된 경우 해당 하위 요소도 다음에 의해 숨겨집니다. 기본. 그러나 특정 시나리오에서는 상위 요소가 숨겨져 있어도 하위 요소를 표시하는 것이 바람직할 수 있습니다.

디스플레이에서는 불가능: 없음

안타깝게도 디스플레이에서는: 없음, 하위 요소를 표시할 수 없습니다. 이는 display: none이 문서 흐름에서 요소를 완전히 제거하여 전체 하위 트리를 보이지 않게 만들기 때문입니다.

display: none

If display: none은 그렇지 않습니다. 적합한 옵션인 경우, 하위 요소를 표시하는 동안 상위 요소를 숨기는 대체 방법을 사용하는 것이 좋습니다.

• visibility: hide: display: none, visible: hide는 제거하지 않고 요소를 숨깁니다. 문서 흐름에서 가져옵니다. 이렇게 하면 하위 요소를 계속 표시할 수 있습니다.

<code class="css">.hide {
  visibility: hidden;
}
.reshow {
  visibility: visible;
}</code>

• 위치 지정 및 클리핑: 위치 지정 및 클리핑 기술을 사용하여 상위 요소를 가리고 하위 요소가 표시되도록 유지합니다. 상위 컨테이너. 이는 상위 요소가 숨기거나 표시할 수 있는 탭이나 섹션을 나타낼 때 특히 유용합니다.

<code class="css">.hide {
  position: absolute;
  overflow: hidden;
  height: 0;
}
.reshow {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}</code>

위 내용은 `display: none`으로 상위 요소가 숨겨져 있을 때 하위 요소를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!