相對於父div的固定位置

是否可以修復元素的位置相對於父div，而不是瀏覽器窗口？相對於父div的固定位置

說我有：

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

基本上有兩個部分的頁面時，左側部分是一個鏈接列表，而右邊部分是頁面的內容。我希望內容是可滾動的，但鏈接保持固定到父頁#container，以便它們在#pagecontainer滾動時不滾動，但當我滾動整個瀏覽器窗口時它們會移動。

我已經試過JQuery「fixto」插件：https://github.com/bbarakaci/fixto。但是我不能使用那個，因爲我的頁面淡入/淡出，並且當父元素（#pagecontainer）的alpha爲0時腳本出錯，它認爲父元素已經消失，無處可修。

謝謝。

來源

2013-03-02 Windbrand

給父position: relative，像這樣：

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

見DEMO。

來源

2013-03-02 00:34:22 zakangelle

它不起作用。我試圖將#pagecontainer和#linkspage都設置爲相對，只有#pagecontainer設置爲相對，只有#linkspage設置爲相對，而.sidelinks爲絕對，沒有任何效果。 – Windbrand 2013-03-02 02:47:36

你能發佈一個鏈接到你正在處理的頁面嗎？ – zakangelle 2013-03-02 02:59:47

E_WORKSFORME :-) – kguest 2014-07-11 13:40:47

我已爲您創建此CodePen。

從你的描述來看，它是那裏的一半。

但是當我滾動整個瀏覽器窗口時，它們會移動。

您將需要使用iframe或某種JavaScript解決方案。

來源

2013-03-02 01:38:46 Alen

相對於父div的固定位置

回答

相關問題