Confused CSS über die Breite und Höhe

Question

CSS

 .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 > div { 
      width: 400px; 
      position: relative; 
      margin: 10% auto; 
      padding: 5px 20px 13px 20px; 
      border-radius: 10px; 
      background: #ffa; 
     } 

Kann mir jemand erklären, warum die Höhe und auf 100% gesetzt Breite nehmen das gesamte Dokument Raum, und seine Eltern nicht, die ist div.X

.modalDialog { 
     width: 100%; 
     height: 100%; 
    } 

auch ein Link zu JS Fiddle https://jsfiddle.net/atmgtm/y6grhv56/

Answer 1

entfernen sie die Eigenschaft position:fixed;, oder es ändern, und es sollte funktionieren. Sei immer vorsichtig mit der CSS-Eigenschaft, sie kann gefährlich sein und zu unerwünschten Ergebnissen führen. Sie wurden WARNING