css - 具有`position:fixed`的div，但仍然具有与`position:relative`相同的行为

Question

当使用position:fixed;它时，人们会得到预期的结果：

我真正想要实现的是：

就像使用两个position: relative;元素时的结果一样

不要误会我的意思，我知道如何position: fixed或如何position: absolute工作并且应该表现得如何，我还没有弄清楚如何获得同一个 div 的两个属性......

一种可行的方法，但不是一个令人满意的解决方案是我position: relative在我的固定元素下方放置了一个 -div，不允许第二个元素在固定元素下方移动，因为它已经被额外的 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');