据说固定div只是从整个页面中取出并与客户端窗口有固定的关系。在我阅读post的最佳答案之前,我认为这很容易。在这种情况下,我看不到固定div和窗口边界之间的强关系。
有人能解释在固定div上设置相对位置的内在黑暗魔法吗?
答案 0 :(得分:2)
这里有两个不同的问题:
position: fixed;
如何运作。您在帖子中写的position: fixed;
基本上是正确的 - 固定对象从页面中取出并贴在窗口边框上。如果你使用左/右/上/下提供起始位置,它将从窗口对象计算它们。
但如果添加position: fixed;
但未添加坐标或仅在一个维度中添加坐标会发生什么?
如果你这样做,那么对象的起始位置将从它从页面流中移除之前的位置计算出来。
让我们尝试使用position: absolute;
的一些简单示例(它与此方面的修复方法非常相似)。
jsFiddle of our examples are here
position: static;
的示例:
`<div>First sentence. <mark>Second sentence.</mark> third sentence. </div>`
在这个例子中,第二句在页面流中,所以它位于第一句之后和第三句之前。
position: absolute;
的示例:
<div>First sentence. <mark style="position: absolute;">Second sentence.</mark> third sentence.</div>
在此示例中,第二个句子取自页面流,但没有给出坐标。所以它位于第一个句子之后(我们从流程中移除之前的位置),但是第三个句子现在处于第二个句子之下,因为如果它不再是流程了。
position: absolute;
的示例; left:0;`:
<div>First sentence. <mark style="position: absolute; left: 0;">Second sentence.</mark> third sentence.</div>
最后我们用left: 0;
给出第二句一些起点,所以现在它不仅没有占据任何空间,而且还移动到容器的左侧。 (但它仍然与之前的高度相同,因为我们没有添加任何top
或right
坐标。)
position: fixed;
的工作方式基本相同。所以在原作者的作者中只修复了顶部坐标而没有修复左边的右边。因为这个对象被水平放置在页面流程中它原始位置的位置。