当子元素的父元素被'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中文网其他相关文章！