Nested fixed element not work in IE - html

Question

I'm trying to put a fixed element within another fixed element like this
<div class="wrapper-fixed">
<div class="content">
<div class="element-fixed">
<p>I'm fixed in Chrome, FF</p>
<p>Why not in IE ?</p>
</div>
</div>
</div>
When I scroll the page in Chrome and FF element-fixed stay fixed but in IE it scrolls too and I guess that should not happen because a fixed element is outside the document flow.
I tried pulling it out of the content but did not work, pulling it out of wrapper-fixed it does but in my case I can't.
HERE A JSFIDDLE similar to my real situation
So why that happens and how fix it without pulling it out of wrapper-fixed
Adding images to illustrate the problem:

Answer 1

Option 1
Change your wrapper position to absolute
.wrapper-fixed{
position: absolute;
...
Fiddle - http://jsfiddle.net/za4hdmpf/
Option 2
Won't be suitable as this requires a solution that does not involve pulling element-fixed out of wrapper-fixed.
Change your markup and make position adjustments to your element-fixed
<div class="wrapper-fixed">
<div class="content">
<p>Content</p>
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
<p>Content 6</p>
<p>Content 7</p>
<p>.</p>
<p>.</p>
<p>.</p>
</div>
</div>
<div class="element-fixed">
<p>I'm fixed in Chrome, FF</p>
<p>Why not in IE ?</p>
</div>
CSS
.element-fixed{
position: fixed;
width: 170px;
border-radius: 10px;
top: 70px;
left: 50%;
margin-left: -290px;
background-color: #fff;
}
Fiddle - http://jsfiddle.net/vuykwu76/