상위 Div가 숨겨져 있는 동안 하위 Div를 볼 수 있습니까?

숨겨진 상위 div 안에 하위 div 표시

상위 div가 숨겨진 상태에서 하위 div를 표시할 수 있나요? 직관에 반하는 것처럼 보일 수도 있지만 이 시나리오는 달성 가능합니다.

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

<style>
  .Main-Div {
    display: none;
  }
</style>

<div class="Main-Div">
  This is some Text..
  This is some Text..
  <div class="Inner-Div'">
    <a href="#"><img src="/image/pic.jpg"></a>
  </div>
  This is some Text..
  This is some Text..
</div>

기본적으로 'Main-Div' 클래스는 'display: none; ' CSS에서. 하지만 목표는 숨겨진 상위 클래스 내에 'Inner-Div' 클래스를 표시하는 것입니다.

이를 달성하려면 표시보다는 가시성을 제어해야 합니다. CSS는 다음과 같이 활용할 수 있습니다.

.parent>.child {
  visibility: visible;
}

.parent {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

여기서 하위 div의 'visibility' 스타일은 'visible'로 설정되고, 상위 div의 'visibility'는 'hidden'으로 설정됩니다. 또한 상위 div의 너비와 높이는 존재를 최소화하기 위해 0으로 정의됩니다. 이렇게 하면 하위 div가 숨겨진 상위 div 내에 표시됩니다.

전체 예제를 보려면 다음 JSFiddle을 참조하세요: http://jsfiddle.net/pread13/h955D/153/.

위 내용은 상위 Div가 숨겨져 있는 동안 하위 Div를 볼 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!