Question

如果我们在父容器中定义一个转换，子位置将从chrome和firefox中的父容器继承而不是ie。

那么我需要做些什么来使它在ie11中工作所以它总是相对于父容器？

div.fixed {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 100px;
  border: 3px solid #73AD21;
  background-color: red;
  transform: translate3d(0, 0px, 0);
}

div.fixed2 {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 100px;
  border: 3px solid #73AD21;
  background-color: blue;
}

<div class="fixed">
  <div class='fixed2'></div>
</div>

Answer 1

问题是您在第一个设置了transform值 - 这会为position:fixed创建一个新的堆叠上下文 - 如果您删除它，那么它将正常工作。如果你需要强迫GPU上的性能，那么嵌套需要它的元素。 Spec

Answer 2

为什么在固定元素中需要固定元素？

你可以简单地为我认为的孩子使用position: absolute。请检查这是否适合您。

如果你真的需要修复它们，我认为你可以简单地将2个元素作为兄弟姐妹

这是更新的代码段

div.fixed {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 100px;
  border: 3px solid #73AD21;
  background-color: red;
  transform: translate3d(0, 0px, 0);
}

div.fixed2 {
  position: absolute;
  top: 100px;
  width: 300px;
  height: 100px;
  border: 3px solid #73AD21;
  background-color: blue;
}

<div class="fixed">
  <div class='fixed2'></div>
</div>

Answer 3

请阅读position财产。我建议https://www.w3schools.com/cssref/pr_class_position.asp作为一个良好的开端。

此外，作为良好的编程习惯，请避免使用fixed之类的单词作为课程的名称，因为这可能会被保留。覆盖这样会导致问题。另外，请使用更具描述性的名称。

如果您希望内部div相对于您的外部div定位，建议使用类似以下的代码......

div.outerDiv
{
    background-color : red;
    border           : 3px solid #73AD21;
    height           : 100px;
    position         : fixed;
    top              : 100px;
    transform        : translate3d( 0, 0px, 0);
    width            : 300px;
}

div.innerDiv
{
    background-color : blue;
    border           : 3px solid #73AD21;
    height           : 100px;
    left             : 20px;
    position         : absolute;
    top              : 10px;
    width            : 300px;
}

<div class = "outerDiv">
    <div class = "innerDiv">
    </div>
</div>

Answer 4

固定意味着元素靠窗口定位，而不是父元素。

只需添加“left: 10px”，您就会看到它不是针对父级的。在所有的brosers。

https://jsfiddle.net/4agxb8z4/

固定位置与IE11中的父容器无关

4 个答案: