Div tuyệt đối không cuộn với trang

Question

Từ fiddle bên dưới, tôi đang cố gắng làm cho div 'điều hướng bên trong' được định vị hoàn toàn để nó vẫn cố định trong hộp 'so sánh hiển thị'. Vấn đề tôi gặp phải là khi bạn cuộn, div 'điều hướng bên trong' không cố định. Làm thế nào tôi có thể khắc phục vấn đề này?

Đây là fiddle tôi:

http://jsfiddle.net/Cd9eZ/

HTML Mã

<div class="compare-display"> 
    <div class="table"> 
     <div class="source-compare col-50"> 
      <div class="page"></div> 
     </div> 
     <div class="navigation-compare"> 
      <div class="inner-navigation"></div> 
     </div> 
     <div class="target-compare col-50"> 
      <div class="page"></div> 
     </div> 
    </div> 
</div> 

CSS Mã

.table { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
.table > div { 
    display: table-cell; 
    vertical-align: top; 
} 
.table > .col-50 { 
    width: 50%; 
    background: green; 
} 
.compare-display { 
    position: relative; 
    overflow: auto; 
    height: 200px; 
} 
.compare-display .navigation-compare { 
    min-width: 50px; 
    background: blue; 

} 
.compare-display .page { 
    margin: 20px; 
    height: 500px; 
    background: orange; 
} 
.compare-display .inner-navigation { 
    position: absolute; 
    width: 50px; 
    top: 0; 
    bottom: 0; 
    background: red; 
} 

Answer 1

Bọc div cố định xung quanh '.compare-display' và xóa vị trí tương đối khỏi '.compare-display'.

Giống như vậy:

jsfiddle.net/Cd9eZ/4

.compare-wrapper { 
    position:fixed; 
} 

.compare-display { 
    /*position: relative;*/ 
} 

<div class="compare-wrapper"> 
    <div class="compare-display">...</div> 
</div> 

Answer 2

Nghĩ bạn muốn position:fixed hơn position:absolute.

Fiddle

CSS Position Documentation

Answer 3

Được này những gì bạn mong đợi?

http://jsfiddle.net/Cd9eZ/3/

.compare-display .inner-navigation { 
    **position: fixed;** 
    width: 50px; 
    top: 0; 
    bottom: 0; 
    background: red; 
} 

Nếu bạn muốn điều hướng gắn liền với cửa sổ, tuyệt đối sẽ không làm việc. Tuyệt đối không xóa phần tử khỏi luồng trang, do đó việc cuộn sẽ luôn di chuyển một phần tử được định vị hoàn toàn vì khung tham chiếu là chính trang và không phải là cửa sổ .

Các phần tử cố định được xóa hoàn toàn khỏi luồng trang và bắt nguồn từ chính không gian cửa sổ.