Maison > interface Web > tutoriel CSS > Comment puis-je afficher une division enfant tout en gardant sa division parent cachée ?

Comment puis-je afficher une division enfant tout en gardant sa division parent cachée ?

Susan Sarandon
Libérer: 2024-12-05 02:53:10
original
409 Les gens l'ont consulté

How Can I Show a Child Div While Keeping Its Parent Div Hidden?

Affichage d'une division enfant au sein d'une division parent cachée

Dans certains scénarios de programmation, on peut rencontrer une situation dans laquelle une division enfant doit être affiché visiblement tandis que le Parent Div reste caché. Ceci peut être réalisé à l'aide de propriétés CSS spécifiques.

Répartition du code :

Le code HTML fourni comprend une division parent avec une classe "Main-Div" et une classe enfant. Div imbriqué à l'intérieur appelé "Inner-Div". Initialement, le "Main-Div" est masqué à l'aide de la propriété CSS "display:none".

Pour rendre le "Inner-Div" visible tout en gardant le "Main-Div" caché, les propriétés CSS suivantes sont appliqué :

  1. visibilité : visible pour la Child Div : Cela garantit que la "Inner-Div" devient visible, quelle que soit sa visibilité du parent.
  2. visibilité : masquée pour la Div Parent : Cela masque la "Div Principale" de la vue tout en permettant à son élément enfant d'être affiché.
  3. width : 0, height : 0, margin : 0 et padding : 0 pour le Parent Div : Ces propriétés CSS supplémentaires réduisent le "Main-Div" à une taille nulle, ce qui le rend effectivement invisible sans affecter l'espace qu'il occupe sur la page.

Exemple :

.parent>.child {
    visibility: visible;
}

.parent {
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}
Copier après la connexion

Par en implémentant ces propriétés CSS, il est possible d'avoir une division enfant visible dans une division parent cachée, comme démontré dans l'exemple JSFiddle fourni.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal