网站建设中的绝对与相对定位

当我第一次学习Web开发时，CSS的风格方面似乎简单而有趣，但执行布局专长似乎是一个令人困惑的混乱。我有点不知道如何定位和花车的工作方式，因此我需要花费数小时才能执行简单的任务。如果这种情况听起来很熟悉，那么本文就适合您。

我早期的一个真正的启示是，当我终于能够围绕定位环境如何工作时，尤其是当它涉及绝对和相对定位之间的差异时。

今天我们将解决这个问题，并确保您确切知道如何以及何时将特定的定位上下文应用于给定元素。

5个不同的位置值

让我们预先解决一些复杂问题。实际上，position属性有五个不同的可能值。我们将在很大程度上跳过继承，因为它非常自我解释（只是继承其父级的值）并且在旧版本的IE中并没有得到很好的支持。

页面上任何元素的默认位置值都是静态的。具有静态定位上下文的任何元素将简单地落在文档流中您期望的位置。这当然完全取决于HTML的结构。

你毫无疑问看到的另一个价值是固定的。这基本上将一个物体固定在背景上，这样无论你放置它的地方，它都会留在那里。我们经常在侧边栏导航元素上看到这个。向下滚动一长页内容后，回到顶部导航到其他地方是很痛苦的，因此在导航中应用固定位置意味着用户永远不会丢失菜单的网站。单击下面的图像以查看实际操作的实例。

因此，您有三个位置值非常简单，易于理解。最后两个当然是绝对的和相对的。让我们专注于独立解释这些问题，然后看看它们如何一起使用以获得独特的结果。

绝对定位

绝对定位允许您从文档的典型流中删除对象，并将其放置在页面上的特定点。为了了解这是如何工作的，让我们设置一个简单的无序项目列表，我们将变成清晰可辨的矩形。

正如我们已经了解到的，默认情况下这些项目将应用静态位置。这意味着它们遵循文档的标准流程，并根据我放在列表中的边距进行定位。现在让我们看看如果我定位其中一个列表项并将一个绝对值应用于position属性会发生什么。

如您所见，第四个列表项已从正常流中完全删除，并放置在浏览器窗口的左上角。请注意，即使有其他内容占据此位置，此元素也不会关心。当某些东西应用了绝对定位时，它既不影响也不受页面正常流中其他元素的影响。

绝对定位的原因是我们可以将这个项目精确定位在我们想要的位置。我们使用顶部，底部，左侧和右侧CSS属性执行此操作。例如，假设我们希望第四个列表项位于浏览器窗口顶部20个像素和左侧20个像素。

为了证明我们之前关于绝对定位的项目不与其他内容交互的观点，让我们将第四个列表项移到其他列表项的区域中。观看它如何简单地重叠现有内容而不是推动它。单击下面的图像查看并调整此测试的实例。

作为最后一点，请注意第五个清单项目如何占据先前由第四个清单持有的位置而不是保持其位置，就像第四个清单项目仍然存在一样。由于第四个项目已从流程中删除，因此其他所有项目都将相应调整。

相对定位

相对定位与绝对定位类似，因为您可以使用顶部，底部，左侧和右侧将对象滑动到页面上的特定点。主要区别是元素的起点或起点。如上所述，通过绝对定位，起点位于浏览器窗口的最左上方。看看我们应用相对定位时会发生什么：

没啥事儿！还是做到了？事实证明，对象现在确实相对定位，但它的起点通常位于文档的流程中，而不是页面的左上角。现在，如果我们应用之前使用的相同的20px调整，结果会大不相同。

这次项目“相对”移动到其起始位置。当你想稍微调整一个对象的位置而不是完全重置它时，这非常有用。请注意，与绝对定位一样，相对定位的对象不关心页面正常低位的其他项目。但是，相对定位元素占据的原始位置没有被下一个列表项占用，就像它使用绝对定位元素一样，而是文档就像第四个项仍然占据该位置一样。

把他们放在一起

既然您已经了解绝对和相对定位如何独立工作，那么现在应该深入了解一个更复杂的示例，看看它们如何以真正有用的方式协同工作。这次我们将构建一个漂亮的小演示来展示它是如何工作的。

HTML

从一个带有“照片”类的简单div开始，并在其中放置一个200x200px的图像。这是我们需要的所有HTML，所以在你得到它之后，转移到一些CSS。

基本CSS

在CSS中，首先将体色更改为深色。然后将一些基本样式应用于photo元素，并为其提供一些漂亮的边框和阴影样式。

这是结果图像。这没什么特别的，但它将为我们的定位实验提供一个很好的试验场。

应用胶带

假设我们想要创造一种幻觉，即这张照片悬挂在背景中，通过一小条胶带连接起来。为了解决这个问题，我们需要弯曲我们新发现的定位肌肉并利用一些伪元素。

我们要做的第一件事是使用：before伪元素来创建我们的磁带。我们将它的高度设置为20px，宽度为100px，然后将背景设置为白色，不透明度为50％。我将通过添加一个轻微的盒子阴影来完成。

如果我们在此代码之后查看我们页面的实时预览，我们可以看到我们真的搞砸了我们的图像。这条磁带真的干扰了文件的流动。即使它不是真的可见，但它已经将我们的形象从边界突然出现了！

显然，我们在如何定位伪元素时遇到了一些问题。为了解决这个问题，让我们看看如果我们对磁带应用相对定位会发生什么。

这是这段代码的效果：

正如你所看到的，我们没有解决我们的问题，一切都像以前一样搞砸了。由于这不起作用，让我们采取相反的路线，看看如果我们使用绝对定位会发生什么。

这是我们的演示现在的样子：

我们的磁带终于出现了！不幸的是，它已经走到了尽头。我们可以用顶部和左侧的值推动它到位，但这实际上不是一个可行的解决方案。原因是这会将磁带放在背景上的特定点上，无论如何都会留在那里。但是，图像已自动居中在视口中，因此您更改实际移动的窗口大小，这意味着磁带将不再正确定位。

所以现在我们已经尝试了相对和绝对定位，既没有提供我们想要的解决方案。我们下一步转向哪里？事实证明，我们还没有真正掌握绝对定位背后的全部故事。你看，它并不总是默认在浏览器窗口的左上角。相反，什么位置：绝对; 确实是将元素相对于其第一个非静态定位的祖先定位（inherit也不计算）。由于之前的示例中没有其中一个，因此只需将其重置为页面的原点。

那么这如何转化为有用的信息呢？事实证明，我们可以在我们的磁带上使用绝对定位，但我们首先需要为其祖先照片添加定位上下文。现在，我们不想绝对定位该元素，因为我们不希望它移动到任何地方。因此，我们对它应用相对定位。让我们看看这是什么样的。

如您所见，伪元素已应用绝对定位，这意味着它将根据其第一个非静态祖先的位置选择起始点。由于我已经对照片应用了相对定位，因此该项目符合此描述。所以现在我们的磁带将从照片的原点开始（即使照片因浏览器调整大小而移动）。

现在我们找到了我们正在寻找的起始位置，我们可以调整顶部和左侧的值以将磁带轻推到位。请注意，我已将一个负值应用于top属性，因此磁带会从图像中伸出到背景上。左侧位置设置为水平居中磁带（单击此处查看数学运算方式）。

正如我们在下面的完成版本中所看到的，结合绝对和相对定位正是我们所需要的，以实现我们的目标。点击下面的图片查看并调整现场演示。

快速摘要

如果你试图在没有坚实的知识基础的情况下实施它们，那么定位上下文就很难掌握。幸运的是，您只需记住三条主要信息即可掌握绝对和相对定位。

首先，相对定位将允许您调整元素相对于其正常起点的位置。

第二个是绝对定位将允许您相对于其第一个非静态定位的祖先调整元素的位置（如果没有找到，则默认为页面边界）。

要记住的最后一条信息是相对和绝对定位的物品不会影响它们周围的静态和固定物品（绝对定位的物品从流中移除，相对定位的物品占据其原始位置）。