html - 如果相对于父元素固定的位置不工作 IE？

Question

如果元素相对于父元素的位置是固定的，则 Internet Explorer 无法正常工作？ 我发现当我固定一个元素时，父元素是否相对定位并不重要。它将相对于 Internet Explorer 中的窗口定位固定。

代码:

// Content DIV
.row {
  width: 1200px;
  margin: 0 auto;
  vertical-align: top;
  text-align: center;
  font-size: 0;
  position: relative;
}
// Call Action DIv
.CallActionR {
  position: relative;
}
.CallActionA {
  position: absolute;
  right: 0;
}
.CallActionContainer {
  position: fixed;
  z-index: 9999;
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0px);
  transition: all 2s linear;
  right: 0;
}
.CallActionDisplay {
  margin: 0px;
  width: 200px;
  height: 58px;
  border: 0px none rgb(0, 0, 0);
  background-color: rgba(59, 110, 142, 0.74902);
  background-size: 100% 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: rgb(241, 241, 241);
  text-decoration: none;
  word-wrap: break-word;
  white-space: normal;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  z-index: 9999;
  padding: 18px 15px;
  font-weight: 600;
  position: fixed;
  right: 0px;
}

<div class="row">
  <div class="CallActionR">
    <div class="CallActionA">
      <div class="CallActionContainer">
        <div class="CallAction">Call TO Action</div>
      </div>
    </div>
  </div>
</div>

固定位置在其他浏览器(如 Google Chrome 和 Firefox)上正确对齐。但是来到 IE 11 就不能正常工作了。固定位置<div>未根据相对窗口对齐。

Answer 1

我刚遇到同样的问题。实际上，除 IE 之外的大多数浏览器(Firefox/Chrome)都在做我想做的事情，但事实证明这是错误的行为。但是由于使用“转换”，它会“破坏” position:fixed 在 IE 中(而不是在其他浏览器中)。这会导致 IE 和其他浏览器之间出现不同的行为。

我的解释可能不是很清楚，所以请在 http://tympanus.net/codrops/css_reference/position/ 上阅读更多内容(Trivia & Notes 的最后一段)。