yếu tố cố định lồng nhau không làm việc trong IE

Question

Tôi đang cố gắng để đưa một yếu tố fixed trong yếu tố khác như thế này 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> 

Khi tôi di chuyển các trang trong Chrome và FF element-fixed nghỉ fixed nhưng trong IE nó cuộn quá và tôi đoán điều đó không nên xảy ra vì phần tử fixed nằm ngoài luồng tài liệu.

Tôi đã cố gắng kéo nó ra khỏi content nhưng không hoạt động, kéo nó ra khỏi wrapper-fixed nó nhưng trong trường hợp của tôi tôi không thể.

HERE A JSFIDDLE tương tự như tình hình thực tế của tôi

Vậy tại sao điều đó xảy ra và làm thế nào khắc phục nó mà không cần kéo nó ra khỏi wrapper-fixed

Thêm hình ảnh để minh họa cho vấn đề:

---

Answer 1

Lựa chọn 1

Thay đổi vị trí wrapper của bạn để tuyệt đối

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

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

Lựa chọn 2

Sẽ không phù hợp vì điều này đòi hỏi phải có một giải pháp mà không liên quan đến việc kéo phần tử cố định ra khỏi bao bọc cố định.

Thay đổi đánh dấu của bạn và thực hiện điều chỉnh vị trí để yếu tố cố định

<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 của bạn

.element-fixed{ 
    position: fixed; 
    width: 170px; 
    border-radius: 10px; 
    top: 70px; 
    left: 50%; 
    margin-left: -290px; 
    background-color: #fff; 
} 

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