Wie zeige ich ein untergeordnetes Element an, wenn sein übergeordnetes Element mit „display: none' ausgeblendet ist?

Untergeordnetes HTML-Element anzeigen, wenn das übergeordnete Element ausgeblendet ist

Wenn ein übergeordnetes Element auf „Anzeige: Keine“ eingestellt ist, werden seine untergeordneten Elemente ebenfalls ausgeblendet Standard. In bestimmten Szenarien kann es jedoch wünschenswert sein, ein untergeordnetes Element anzuzeigen, auch wenn sein übergeordnetes Element ausgeblendet ist.

Unmöglich mit Anzeige: keine

Leider mit Anzeige: none, es ist nicht möglich, ein untergeordnetes Element anzuzeigen. Dies liegt daran, dass display: none das Element vollständig aus dem Dokumentfluss entfernt und seinen gesamten Unterbaum unsichtbar macht.

Alternativen zu display: none

Wenn display: none nicht vorhanden ist Als geeignete Option sollten Sie die Verwendung alternativer Methoden in Betracht ziehen, um das übergeordnete Element auszublenden und gleichzeitig das untergeordnete Element anzuzeigen:

• Visibility: Hidden: Im Gegensatz zu Display: None verbirgt Visibility: Hidden ein Element, ohne es zu entfernen es aus dem Belegfluss. Dadurch bleiben untergeordnete Elemente sichtbar.

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

• Positionierung und Zuschneiden: Verwenden Sie Positionierungs- und Zuschneidetechniken, um das übergeordnete Element zu maskieren, während das untergeordnete Element innerhalb eines sichtbar bleibt übergeordneter Container. Dies ist besonders nützlich, wenn das übergeordnete Element eine Registerkarte oder einen Abschnitt darstellt, der ausgeblendet oder angezeigt werden kann.

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

Das obige ist der detaillierte Inhalt vonWie zeige ich ein untergeordnetes Element an, wenn sein übergeordnetes Element mit „display: none' ausgeblendet ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!