親 Div を非表示にしたまま子 Div を表示するにはどうすればよいですか?

非表示の親 Div 内に子 Div を表示する

特定のプログラミング シナリオでは、子 Div を表示する必要がある状況に遭遇することがあります。親 Div は非表示のままで表示されます。これは、特定の CSS プロパティを使用して実現できます。

コードの内訳:

提供される HTML コードには、「Main-Div」クラスの親 Div と子が含まれています。その中にネストされた Div は「Inner-Div」と呼ばれます。最初は、CSS プロパティ「display:none」を使用して「Main-Div」が非表示になっています。

「Main-Div」を非表示にしたまま「Inner-Div」を表示するには、次の CSS プロパティを使用します。適用:

1. 可視性: 子 Div に対して表示: これにより、 "Inner-Div" は、親の可視性に関係なく表示されます。
2. visibility: hidden for the Parent Div: これにより、子要素は許可されたままで、"Main-Div" がビューから非表示になります。親の
3. width: 0、height: 0、margin: 0、padding: 0 Div: これらの追加の CSS プロパティは、「Main-Div」をサイズ 0 に縮小し、ページ上で占有するスペースに影響を与えることなく事実上非表示にします。

例:

.parent>.child {
    visibility: visible;
}

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

これらの CSS プロパティを実装することにより、非表示の親 Div の中に子 Div を表示することができます。 Div。提供されている JSFiddle の例で示されているように。

以上が親 Div を非表示にしたまま子 Div を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。