상위 Div를 숨긴 상태로 하위 Div를 표시하려면 어떻게 해야 합니까?

숨겨진 상위 Div 내에 하위 Div 표시

특정 프로그래밍 시나리오에서는 하위 Div를 표시해야 하는 상황이 발생할 수 있습니다. Parent Div가 숨겨져 있는 동안 눈에 띄게 표시됩니다. 이는 특정 CSS 속성을 사용하여 달성할 수 있습니다.

코드 분석:

제공된 HTML 코드에는 "Main-Div" 클래스가 있는 상위 Div와 하위 Div가 포함되어 있습니다. "Inner-Div"라는 Div가 그 안에 중첩되어 있습니다. 처음에는 CSS 속성 "display:none"을 사용하여 "Main-Div"를 숨깁니다.

"Main-Div"를 숨긴 상태로 유지하면서 "Inner-Div"를 표시하려면 다음 CSS 속성을 사용하세요. 적용:

1. 가시성: 하위 Div에 표시: 이렇게 하면 "Inner-Div"가 상위 항목의 가시성과 관계없이 표시됩니다.
2. visibility: 상위 Div에 대해 숨겨짐: 하위 요소가 표시되는 동안 "Main-Div"가 보기에서 숨겨집니다.
3. 상위 Div의 너비: 0, 높이: 0, 여백: 0, 패딩: 0: 이러한 추가 CSS 속성은 "Main-Div"를 0 크기로 축소하여 페이지에서 차지하는 공간에 영향을 주지 않고 효과적으로 보이지 않게 만듭니다.

예:

.parent>.child {
    visibility: visible;
}

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

이러한 CSS 속성을 구현하면 제공된 설명에서 볼 수 있듯이 숨겨진 상위 Div 내에 표시되는 하위 Div를 가질 수 있습니다. JSFiddle 예시.

위 내용은 상위 Div를 숨긴 상태로 하위 Div를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!