CODEWITHSUNDEEP
htmlcss
user2977259
user2977259

Reputation: 65

Confused CSS about the width and height

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;
        }

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 

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

Also a link to JS Fiddle https://jsfiddle.net/atmgtm/y6grhv56/

Upvotes: 0

Views: 84

Answers (1)

Arnav Borborah
Arnav Borborah

Reputation: 11779

Remove the property position:fixed;, or change it, and it should work. Always be careful with the CSS position property, it can be dangerous and could lead to undesirable results.

Upvotes: 2

Related Questions