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

有人可以向我解释为什么高度和宽度设置为100％占用整个文档空间，而不是它的父级div.X

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

也是JS Fiddle https://jsfiddle.net/atmgtm/y6grhv56/

的链接

Answer 1

删除属性position:fixed;，或更改它，它应该有效。一定要小心CSS位置属性，它可能很危险，并可能导致不良结果。 您已被警告

关于宽度和高度的困惑的CSS

1 个答案: