Can a Child Div Be Visible While Its Parent Div Is Hidden?

Displaying Child Div Inside a Hidden Parent Div

Can a child div be displayed while its parent remains hidden? While it may seem counterintuitive, this scenario is achievable.

Consider the following HTML code:

<style>
  .Main-Div {
    display: none;
  }
</style>

<div class="Main-Div">
  This is some Text..
  This is some Text..
  <div class="Inner-Div'">
    <a href="#"><img src="/image/pic.jpg"></a>
  </div>
  This is some Text..
  This is some Text..
</div>

By default, the 'Main-Div' class is hidden using 'display: none;' in CSS. However, the goal is to show the 'Inner-Div' class within this hidden parent.

To accomplish this, it's necessary to control visibility rather than display. CSS can be utilized as follows:

.parent>.child {
  visibility: visible;
}

.parent {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

Here, the 'visibility' style is set to 'visible' for the child div, while the parent div's 'visibility' is set to 'hidden'. Additionally, the parent div's width and height are defined as zero to minimize its presence. By doing this, the child div becomes visible within the hidden parent div.

For a complete example, refer to the following JSFiddle: http://jsfiddle.net/pread13/h955D/153/.

The above is the detailed content of Can a Child Div Be Visible While Its Parent Div Is Hidden?. For more information, please follow other related articles on the PHP Chinese website!