我如何理解固定div还有左/右边距?

时间:2013-02-05 01:31:57

标签: css

据说固定div只是从整个页面中取出并与客户端窗口有固定的关系。在我阅读post的最佳答案之前,我认为这很容易。在这种情况下,我看不到固定div和窗口边界之间的强关系。

有人能解释在固定div上设置相对位置的内在黑暗魔法吗?

1 个答案:

答案 0 :(得分:2)

这里有两个不同的问题:

  1. position: fixed;如何运作。
  2. 在绝对位置和固定位置放置的位置,您没有写上/左/下/右坐标。
  3. 您在帖子中写的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;给出第二句一些起点,所以现在它不仅没有占据任何空间,而且还移动到容器的左侧。 (但它仍然与之前的高度相同,因为我们没有添加任何topright坐标。)

    position: fixed;的工作方式基本相同。所以在原作者的作者中只修复了顶部坐标而没有修复左边的右边。因为这个对象被水平放置在页面流程中它原始位置的位置。