iframe within hidden div - iframe content not visible

Question

I'm looking for an explanation of the following observed behaviour:

A

    <div id="parent" style="visibility:hidden">
     <div id="child" style="visibility:visible"></div>
    <div>

B

    <div id="parent" style="visibility:hidden">
     <iframe>
      <div id="child" style="visibility:visible"></div>
     </iframe>
    <div>

In scenario A, the content of the div 'child' is visible in the browser. In scenario B, the content of the div 'child' is not visible in the browser, despite having visibility set to visible

All styling applied using Javascript, the above is just a crude representation of the situation. Tested in Chrome 51.0.2704.106 m Can someone help to explain why adding an iframe, which inherits the parent hidden visibility value, hides the child div without changing its visibility value?

Answer 1

visibility: hidden as like display:none . If you give display none of your parent class or element you can't see the children element. You can not see the child div because you hid parent div of child div .

but top you can see child because top child and parent both are individual div not included in other div. I hope you understand . You can take more information from reference link :-

Link for more information