0

据说一个固定的div只是从整个页面中取出，与客户端窗口有固定的关系。在我阅读这篇文章的最佳答案之前，我认为这很容易。在那种情况下，我看不到固定 div 和窗口边框之间的密切关系。

任何人都可以解释在固定 div 上设置相对位置的内在黑魔法吗？

4

1 回答 1

2

这里有两个单独的问题：

  1. 如何position: fixed;运作。
  2. 在什么地方放置绝对和固定定位的项目然后你没有写上/左/下/右坐标。

您在帖子中所写的内容position: fixed;基本上是正确的——固定对象被从页面中取出并粘在窗口边框上。如果您通过使用左/右/上/下为它提供起始位置，它将从窗口对象中计算它们。

但是如果添加position: fixed;但不添加坐标或仅添加一维坐标会发生什么？

如果您这样做，则对象的起始位置将根据它从页面流中删除之前的位置计算。

让我们尝试一些简单的例子position: absolute;（在这方面它的工作原理与固定的几乎相同）。

我们的示例的 jsFiddle 在这里

示例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>

在这个例子中，第二句取自页面流，但没有给出坐标。所以它位于第一句之后（在我们从流中删除 if 之前的位置），但第三句现在在第二句之下，因为 if 不再是流了。

和的例子position: absolute;；左：0；`：

<div>First sentence. <mark style="position: absolute; left: 0;">Second sentence.</mark> third sentence.</div>

最后我们给第二句一些起点，left: 0;所以现在它不仅没有占用任何空间，而且还移到了容器的左侧。（但由于我们没有添加任何坐标，所以它仍然和以前一样高度top）right。

position: fixed;工作几乎一样。因此，在原始帖子中，作者只是固定了顶部坐标而没有固定左右。因为这个对象被水平放置在页面流中它的原始位置的位置。

于 2013-02-16T22:06:20.873 回答