相对于父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的固定位置

回答

相关问题