固定位置不是相对于IE11中的父容器

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上以提高性能，请嵌套需要它的元素。 规格

Answer 2

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

您可以简单地使用position: absolute我认为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 ”，您会发现它的位置与父级不对。 在所有经纪人中。

https://jsfiddle.net/4agxb8z4/