Уплотненный фиксированный элемент не работает в IE

Question

Я пытаюсь поставить fixed элемент внутри другого элемента fixed как этот

<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> 

Когда я прокручиваю страницу в Chrome и FF element-fixed пребывания fixed, но в IE она прокручивается слишком и я предполагаю, что этого не должно произойти, потому что элемент fixed находится вне потока документов.

Я попытался вытащить его из content, но не работал, вытащил его из wrapper-fixed, но в моем случае я не могу.

HERE A JSFIDDLE похож на моей реальной ситуации

Так почему это происходит и как это исправить, не вытаскивая его из wrapper-fixed

Добавление изображения для иллюстрации проблемы:

---

Answer 1

Вариант 1

Измените положение обертку к абсолютному

.wrapper-fixed{ 
    position: absolute; 
    ... 

Fiddle - http://jsfiddle.net/za4hdmpf/

Вариант 2

не будет подходящим, так как это требует решения, не включает в себя вытягивание элемента, закрепленного за пределами установленной оболочки.

Изменить разметку и сделать корректировки позиции для вашего элемента фиксированной

<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; 
} 

скрипку - http://jsfiddle.net/vuykwu76/