當子元素的父元素被「display: none」隱藏時，如何顯示子元素？

隱藏父元素時顯示HTML 子元素

當父元素設定為display: none 時，其子元素也會被隱藏預設。然而，在某些情況下，即使父元素被隱藏，也可能需要顯示子元素。

無法使用顯示：無

不幸的是，使用顯示： 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中文網其他相關文章！