fixed position is not relative to parent container in IE11

Question

If we define a transform in the parent container the child position will inherit from the parent container in chrome and firefox but not in ie.

So what do I have to do for it to work in ie11 so it's always relative to the parent container?

 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

The issue is that you have a transform value set on the first - this creates a new stacking context for position:fixed to be placed from - if you remove that then it will work properly. If you need to force things onto the GPU for performance then nest the element that needs it. Spec

Answer 2

why do you need fixed element inside fixed element?

you can simply use position: absolute for the child i think. please check if this works for you.

if you really need both of them to be fixed, i think you can simple make 2 elements as siblings

here is the updated snippet

 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

Please read up on the position property. I suggest https://www.w3schools.com/cssref/pr_class_position.asp as a good start.

Also, as a matter of good programming practice please avoid using words like fixed as a name for a class as this may be reserved. Overwriting such can cause problems. Also, please use more descriptive names.

If you want the inner div positioned relative to your outer div is suggest using code similar to the following...

 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

Fixed means that the element is positioned against the window, not the parent element.

Just add " left: 10px " and you'll see that it's not positioned against the parent. In all brosers.

https://jsfiddle.net/4agxb8z4/