固定位置不是相對於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/