SS 中的 position 属性只有几个有效值，但这些值会导致无穷无尽的设计可能性，这使得学习定位相当困难。 在本文中，我将分解每个位置值并解释您需要了解的有关它们的所有信息。

静态位置 Static Position

首先，我们将介绍您可能从未听说过但一直使用的最简单的位置值，那就是静态位置。 static 是 position 属性的默认值，本质上只是意味着元素将遵循正常的文档流并根据标准定位规则定位自身。您没有设置位置属性的任何元素都是静态的，这意味着您使用的大多数元素都是静态定位的。 静态定位元素不能应用 z-index、top、left、right 或 bottom 属性。

相对位置 Relative Position

下一个最简单的位置类型是相对位置。 相对位置元素的工作方式与静态位置完全相同，但您现在可以为其添加 z-index、top、left、right 和 bottom 属性。 如果您在不设置任何这些额外属性的情况下使元素相对定位，您会注意到它看起来与静态定位元素完全相同。 这是因为相对定位的元素也遵循正常的文档流，但您可以使用 top、left、right 和 bottom 属性来偏移它们。

从上面的示例中，您可以看到当没有定义额外的属性时，元素的工作方式与静态一样。 但是，一旦添加了 left 或 top 之类的属性，您可以看到元素通过这些 top、left、right 和 bottom 属性相对于其正常位置偏移了自身。 但是，您会注意到，这个偏移不会影响到其它元素。 这是因为所有其他元素都假定相对定位元素没有偏移，并且它们根据相对定位元素在静态时的位置来确定它们的位置。

现在，它自己的相对位置并没有那么有用，因为您通常不想在不移动元素周围的所有元素的情况下偏移元素。 位置相对的主要用例是设置元素的 z-index，或者用作绝对定位元素的容器，我们将在下面讨论。

绝对定位 Absolute Position

绝对位置是从正常文档流中完全移除元素的第一个位置。 如果你给一个元素绝对位置，所有其他元素都会表现得好像绝对定位的元素甚至不存在一样。

可以看到，元素二和三的布局就好像元素一从未存在过一样。 您还会注意到第一个元素不再填满整个宽度。 这是因为绝对定位元素的宽度默认为自动，而不是像 div 那样全宽。 此外，默认情况下，绝对定位元素会将自身放置在文档中，如果它是静态元素，它通常会呈现，但我们可以使用 top、left、right 和 bottom 属性来更改它。

现在您可以看到我们的元素已移动到灰色边框的左上角。 我使用这个灰色边框来表示整个屏幕，因为默认情况下，绝对位置元素将相对于Body定位自身，因此顶部和左侧为 0 表示该元素将出现在body的左上角。 您可以通过将其父元素之一的位置设置为静态以外的任何值来更改绝对定位元素所在的元素。 这是使用相对位置最常见的地方之一。

通过将灰色父元素设置为相对位置，绝对定位的子元素位于父元素的左上角而不是Body。 这种相对位置和绝对位置的组合使用非常普遍。

固定位置 Fixed Position

现在我们来到一个较少使用的位置，即固定位置。 固定位置有点像绝对位置，因为它从文档流中删除元素，但固定位置元素总是相对于屏幕定位，无论其父元素在什么位置。

如您所见，我们的一个元素固定在页面的左上角。 您还会注意到，当您滚动页面时，无论您滚动到哪里，它都会停留在页面的左上角。 这是固定和绝对之间的主要区别。

粘性位置 Sticky Position

最后一个是较新的粘性位置。 这个位置是固定位置和静态位置的结合，并结合了两者的优点。 位置为粘性的元素将充当静态定位元素，直到页面滚动到该元素碰到指定的顶部、左侧、右侧或底部值的点。 然后它将像一个固定位置的元素一样，随着页面滚动，直到元素到达其容器的末尾。

首先，您会注意到一个元素在文档流中处于其正常位置，就好像它是静态的一样。 一旦将页面滚动到一个元素的顶部距离页面顶部 10px 的位置，它就会像位置固定一样粘在页面顶部。 这将一直持续到元素到达紫色父容器的底部，在这种情况下它将停止与页面一起滚动。

粘性位置是随页面滚动的导航栏、长列表中的标题以及许多其他用例的完美位置。

One More Thing about Absolute/Fixed Position

现在，您需要了解关于固定和绝对位置元素的一件事，因为它可能会导致一些奇怪的、难以发现的错误。 绝对定位的元素将使用第一个具有非静态位置(非static)的父元素作为其容器来偏移自己，如果没有父元素具有静态以外的位置值，它将默认为Body。 我们已经知道了，但这并不是定义父容器的唯一方法。 绝对定位元素还将检查设置了transform, filter, or perspective属性的父级。 如果在父级上找到其中任何一个，它将使用该父级作为容器。

在上面的例子中，我们的灰色父元素是一个静态位置，但由于它有一个transform属性，所以它将充当我们绝对定位子元素的容器。绿色盒子将它视为定位的父容器。

最后：

希望大家都可以掌握这些定位方式，避免在开发中踩到坑！感谢阅读！

SS所提供的Position定位属性在进行网页页面布局过程中非常重要，通过使用Position定位属性可以实现对页面元素进行精确定位，最终达到较好的设计及页面展示效果。本文主要针对Position属性设计教学案例，实现教学。

Position定位属性

Position定位属性为设计人员提供5类定位模式，分别为static静态定位、relative相对定位、absolute绝对定位、fixed固定定位及sticky磁铁定位模型。其中较常使用的是相对定位、绝对定位与固定定位三种模式。

1. static静态定位：该定位模式为HTML元素默认定位形式，各类元素按照文档流对象模型正常排列。使用static定位是，top，left，right，bottom属性无效。
2. relative相对定位：该定位模式是指相对自身位置定位（可以理解为相对默认位置进行定位），通过使用top，left，right，bottom属性实现偏移，该定位模式不会影响正常文档流，即其他元素位置相对默认位置不变。在DIV嵌套时可以对父层使用该属性为子层绝对定位提供祖先。
3. absolute绝对值定位：该定位形式将其最近定位的元素确定为祖先元素，参照祖先元素位置实现定位。如果祖先元素没有任何定位的话，则以body为祖先元素进行定位。该定位模式将使得被定位元素脱离文档流。即不保留默认情况下该元素位置。
4. fixed固定值定位：该定位模式相对于视口进行定位，定位元素不会随着滚动条的滚动而滚动。与absolute定位的最大区别在于absolute是相对body内容区域进行的定位，会随着滚动条滚动而滚动。

以上给出了position属性常用的定位方式，在实际进行页面设计及元素布局过程中可以使用以上属性实现元素的精确定位。

定位实例

为演示定位属性使用，本文设计制作上海世界技能大赛选手证，要求学生使用HTML进行选手证的设计及编码实现。要求：

1. 选手证需要包含四个DIV层，分别用于表示背景框架层、顶部Logo层、选手照片层及选手信息层；
2. 使用定位属性实现各层的精确定位；

本例设计要求如上所示，设计实现参考效果如下所示：

参赛证设计样式描述如上图所示，基本元素来自世界技能大赛上海网站，主要logo包含上海世赛标识LOGO、选手照片与选手信息。所需素材如下：

实现代码

本例实现代码如下所示：

本例实现代码如上所示，其中CSS样式部分用于实现div布局样式，页面body部分为页面呈现内容。本例父元素使用relative属性进行定位，所有子元素均以父元素为基础使用absolute进行精确定位。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！如需完整案例代码请关注并私信作者。