位置子div相对于祖父母div

我有一个CSS问题，我不知道它是否真的有可能实现我想要的。下面就来说明我想达到什么样的草图：位置子div相对于祖父母div

而这里的演示页：

其实孩子的div应相对定位的祖父母股利。但是，这怎么做呢？我不能使用position：fixed;因为如果页面上有很多其他内容，则用户不得不向下滚动。或者是否有我可以使用的jQuery插件，将子div剪切到祖父母div，然后他们只要将它们放在一起，无论它们在哪个页面上？

感谢您的帮助。

来源

2009-02-11 Philipp Küng

你为什么不只是切换父母及祖父母等孩子可以相对其父定位？似乎会更容易。 – cletus 2009-02-11 12:29:06

我认为如果你能够添加一个“greatgrandparent”并且相对于这个孩子定位，你可以达到你想要的。

这里对你发布的代码修改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 

    <div style="position: relative;"> 

    <div style="background-color: InfoBackground; border: solid 1px Silver; width: 400px; height: 200px; overflow-y:auto; overflow-x:hidden;"> 

     <div style="background-color: InfoBackground; border: solid 1px Silver; width: 100%; font-size: 11px; padding-left: 210px;" > 

      <div style="background-color: Window; border: solid 1px Silver; width: 200px; height: 199px; position: absolute; top: 1px; left: 1px;" > 

       <p style="font-family: Segoe UI; font-size: 11px;"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
       </p> 

      </div> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 


     </div> 

    </div> 
    </div> 
    <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 
</body> 
</html>

来源

2009-02-11 14:22:16

我会考虑使用Javascript来创建一个新的div，并将子div的内容移动到您的新div中。这是一种黑客攻击，但如果您无法将HTML结构更改为更适合您的目标的功能，则该功能可行。

来源

2009-02-11 14:05:24

位置子div相对于祖父母div

回答

相关问题