Confused CSS about the width and height
<p>CSS</p>

<pre><code>        .modalDialog {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          opacity: 0;
          z-index: 99999;
          width: 100%;
          height: 100%;
          font-family: Arial, Helvetica, sans-serif;
          background: rgba(0, 0, 0, 0.1);
          pointer-events: none;
        }


        .modalDialog:target {
          opacity: 1;
          pointer-events: auto;
        }


        .modalDialog &gt; div {
          width: 400px;
          position: relative;
          margin: 10% auto;
          padding: 5px 20px 13px 20px;
          border-radius: 10px;
          background: #ffa;
        }
</code></pre>

<p>Can someone explain to me why the height and width set to 100% take the whole document space , and not its parent which is div.X </p>

<pre><code>    .modalDialog {
         width: 100%;
         height: 100%;
    }
</code></pre>

<p>Also a link to JS Fiddle <a href="https://jsfiddle.net/atmgtm/y6grhv56/" rel="nofollow">https://jsfiddle.net/atmgtm/y6grhv56/</a>          </p>