Sửa vị trí liên quan đến div cha

Question

Có thể sửa vị trí của một phần tử liên quan đến div cha, chứ không phải cửa sổ trình duyệt?

Nói rằng tôi có:

<div id="pagecontainer"> 

    <div id="linkspage"> 

     <div class="sidelinks"> 
      <a href="#page1" class="link">Link 1</a> 
      <p> 
      <a href="#page2" class="link">Link 2</a> 
      <p> 
      <a href="#page3" class="link">Link 3</a> 
      <p> 
      <a href="#page4" class="link">Link 4</a> 
      <p> 
     </div> 

     <div class="linkscontent"> 
      content of links page 
     </div> 

    </div> 

    //OTHER PAGES 

</div> 

Về cơ bản một trang có hai phần, phần bên trái là danh sách các liên kết, trong khi phần bên phải là nội dung của trang. Tôi muốn nội dung có thể cuộn được, nhưng các liên kết vẫn cố định với #pagecontainer gốc để chúng không cuộn khi #pagecontainer cuộn, nhưng chúng sẽ di chuyển khi tôi cuộn toàn bộ cửa sổ trình duyệt.

Tôi đã thử plugin "fixto" của JQuery: https://github.com/bbarakaci/fixto. Nhưng tôi không thể sử dụng nó vì các trang của tôi mờ dần vào/ra và kịch bản lỗi khi phần tử cha (#pagecontainer) có alpha là 0, nó cho rằng phần tử gốc đã biến mất và không có nơi nào để sửa.

Cảm ơn.

Answer 1

Cho phụ huynh position: relative, như thế này:

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 0; 
} 

Xem DEMO.

Answer 2

Tôi đã tạo CodePen cho bạn.

Từ mô tả của bạn, đó là một nửa ở đó.

nhưng chúng sẽ di chuyển khi tôi cuộn toàn bộ cửa sổ trình duyệt.

Bạn cần sử dụng iframe hoặc một số loại giải pháp JavaScript.