Comment afficher un élément enfant lorsque son parent est masqué avec « display : none » ?

Affichage de l'élément enfant HTML lorsque le parent est masqué

Lorsqu'un élément parent est configuré pour afficher : aucun, ses éléments enfants sont également masqués par défaut. Cependant, dans certains cas de figure, il peut être souhaitable d'afficher un élément enfant même lorsque son parent est masqué.

Impossible avec affichage : aucun

Malheureusement, avec affichage : aucun none, il n'est pas possible d'afficher un élément enfant. En effet, display: none supprime complètement l'élément du flux de documents, rendant l'intégralité de son sous-arbre invisible.

Alternatives à display: none

Si display: none ne l'est pas une option appropriée, pensez à utiliser des méthodes alternatives pour masquer l'élément parent tout en affichant l'enfant :

• visibilité : Hidden : Contrairement à display: none, Visibility: Hidden masque un élément sans le supprimer du flux de documents. Cela permet aux éléments enfants de rester visibles.

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

• Positionnement et découpage : Utilisez des techniques de positionnement et de découpage pour masquer l'élément parent tout en gardant l'enfant visible dans un conteneur parent. Ceci est particulièrement utile lorsque l'élément parent représente un onglet ou une section qui peut être masqué ou affiché.

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!