html - CSS 定位在 Internet Explorer 中不起作用

Question

我在使用 Internet Explorer 时遇到一个关于 css div 定位的问题。

我创建了这个 DEMO 来自 codepen.io 。

如果您使用 chrome 或 firefox 检查此演示，则可以看到 .test div 定位正确，但是当您使用 Internet Explorer 打开演示时，您可以看到 .test div 移到了左侧。我怎样才能解决这个问题以在所有浏览器中工作，任何人都可以在这方面帮助我？

    .test {
      display: block;
      position: absolute;
      height: auto;
      top: 0;
      left: 0;
      right: 0;
      max-width: 580px;
      min-width: 300px;
      margin-top: 64px;
      margin-bottom: 20px;
      margin-right: auto;
      margin-left: auto;
      padding-top: 2px;
      background-color: #f7f7f7;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
      -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -o-border-radius: 3px;
      -moz-border-radius: 3px;
      min-height: 840px;
    }
.header {
  height: 12rem;
  background: #009688;
}

<div class="test"></div>

Answer 1

position : absolute

元素相对于其第一个定位(非静态)祖先元素定位。

所以你需要指定位置(position:relative | fixed | absolute 即任何位置除了静态)到父级(这个案例主体或 html)