相对于滚动DIV定位固定DIV？

Question

我正在尝试在我的网站上放置一个浮动菜单，该菜单位于浏览器的中心位置。

我已经将静态div“position：fixed”设置为“left：0”。我希望静态div和其他滚动内容之间的差距保持不变。我已经尝试将div放在一个中心对齐的父div中，但这不起作用。

你知道怎么做到这一点吗？

Answer 1

我认为这就是你想要的......固定的div只是你所期望的固定位置。滚动有一个左边距，可以将其从固定的边缘推出一定量（更改此值以更改间隙）。然后有一个包装器div，它按照你在问题中所说的那样居中，在页面中间将它们全部保存在一起。

DEMO

HTML

<div id="wrap">
  <div id="fix">test</div>
  <div id="scr">test<br /></div>
</div>

CSS

#wrap {
  width: 500px;
  background-color:#F00;
  margin: 0 auto;
}
#fix {
  border: 1px solid #ccc;
  height: 100px;
  width: 200px;
  position: fixed;
}

#scr {
  border: 1px solid #000;
  margin-left: 220px;
  position: relative;
}

Answer 2

好吧所以我迟到了，但你可以像这样设计身体标签：

body {
    margin-left: 200px;
}

jsFiddle example

Answer 3

由于你没有说过div的宽度和它们的位置，我可以建议一个非常简单的解决方案：静态div必须有一个固定的宽度和一个滚动 - margin-left等于静态的宽度加上一些值（间隙宽度）

div#static
{
   width: 200px;
   ...
}


div#scrolling
{
   margin-left:180px;
   ...
}

间隙的常数值为20px