Nested fixed element not work in IE

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/