div使用`position：fixed`，但仍然具有与`position：relative`相同的行为

Question

使用position:fixed;时，这是预期的结果：

我真正想要的是：

使用两个position: relative;元素

时， 此结果

不要误会我的意思，我知道position: fixed或position: absolute是如何工作的，应该如何表现，我怎么没有来到如何获得同一个div的两个属性...

一种方法可行，但不是一个令人满意的解决方案是我在我的固定元素下面放置position: relative -div，不允许第二个元素移动到固定元素下面，因为它已被额外的元素占用格。

所以我试图让这个第二个相对div 与:after 或 :before伪元素一起使用。这似乎不起作用

div:after, div:before { position: relative; }

由于元素本身是

，因此它以某种方式混淆了

div { position: fixed }

并且转动fixed和relative显然也不起作用，因为fixed将绑定到relative - 元素。

有什么想法吗？

如果有人想知道为什么我需要使用fixed并且不要只使用relative：这是出于滚动的原因。

Answer 1

为什么不在相对div上使用保证金？

http://jsfiddle.net/q3nQr/1/

HTML

<div id="fixed"></div>
<div id="relative"></div>

CSS

#fixed { position: fixed; width: 60px; height:100px; background: red;  }

#relative { position: relative; width: 300px;height:1000px; background: green; margin-left:65px; }

<强>更新

看一下静态定位的w3规范（只读前两段）。

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

  

完全从文档中删除绝对定位的元素   流。这意味着它们对其父元素或根本没有任何影响   关于它们在源代码中出现的元素。一个   绝对定位元素因此将与其他内容重叠   除非你采取行动防止它。有时，当然，这个   重叠正是你想要的，但你应该意识到它   确保你得到你想要的布局！

     

固定定位实际上只是绝对的一种特殊形式   定位;具有固定定位的元件相对于固定定位   视口/浏览器窗口而不是包含元素;即使   页面滚动，它们保持在内部完全相同的位置   浏览器窗口。

这意味着具有固定或绝对位置的元素不与文档中的任何其他元素相关联，这意味着它们不能影响另一个元素的宽度。如果静态元素的宽度未知，我认为你需要用javascript操作DOM;像（jquery，未经测试）这样简单的东西：

var staticwidth = $("#static").width();
$("#relative").css('margin-left', staticwidth + 'px');