親要素が「display: none」で非表示になっているときに子要素を表示するにはどうすればよいですか?

親が非表示の場合の HTML 子要素の表示

親要素が表示: none に設定されている場合、その子要素も非表示になります。デフォルト。ただし、特定のシナリオでは、親が非表示の場合でも子要素を表示することが望ましい場合があります。

display では不可能: none

残念ながら、display では次のようになります。 none の場合、子要素を表示することはできません。これは、display: none がドキュメント フローから要素を完全に削除し、サブツリー全体が非表示になるためです。

display: none の代替手段

display: none は非表示です。適切なオプションとして、子の表示中に親要素を非表示にする別の方法を使用することを検討してください。

• visibility: hidden: display: none とは異なり、visibility: hidden は要素を削除せずに非表示にします。ドキュメントフローから。これにより、子要素を表示したままにすることができます。

<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 中国語 Web サイトの他の関連記事を参照してください。