关于CSS位置属性的深度指南
位置在CSS中被大量使用，用来描述元素在文档中的放置方式。同时，它们还描述了元素在top 、left 、bottom 、right 属性下的行为方式。在CSS中，有五个定位属性，即。static,relative,fixed,absolute, 和sticky 。这些属性的行为方式很特别。在这篇文章中，我们将进一步了解position 属性及其类型。
position 属性
一个元素的position 属性指定了一个元素和文档之间在定位方面的关系。对于一些元素来说，它们被限定在其父元素内，而对于其他元素来说，它们直接与视口相关。元素的定位方式定义了它们如何与top,left,bottom和right 。当值为0时，这些属性可以将元素置于父元素的边缘或视口的边缘。
在我们进入五个位置属性--static,relative,absolute,fixed 和sticky --之前，让我们看看什么是定位元素，以及它们如何与top 属性一起工作。
定位元素和top 属性
在CSS中，有些元素可以被定位，有些不可以。所谓定位是指元素可以有一个位置的转移而不影响周围的元素。对于非定位的元素，任何位置的移动都会影响到周围的元素。下面是我的意思：
容器内两个块的截图
在上面的截图中，我们在一个容器内有两个块。现在，让我们看看一个元素改变位置意味着什么：
显示其中一个块的位置的屏幕截图
在上面的截图中，第一个块被定位了。你可以看到，它下面的块没有受到影响：
截图显示当一个块移动并破坏下一个块时沿着相同的距离移动，第一个块推动了第二个块。你会注意到，下一个块现在的高度减少了，因为它被推到了容器外一点。在第一张图片中，第一个块被定位了。这意味着像top, 和bottom 这样的属性（用于定位元素）可以在不影响其环境的情况下放置该块。但是，像top 这样的属性不能用在非定位元素上。正如你在第二个块中看到的，这个块并没有被重新定位。相反，它被推到了，从而影响了它后面的元素。这些例子带来了以下总结：top 和bottom 是用于重新定位元素的属性，而margin-top 和margin-bottom 是用于推送元素的。第一张图片显示了一个使用top 和left 的定位块，而第二张图片显示了一个使用margin-top 和margin-left 的非定位块。
然而，不要混淆，如果你在一个已定位的块上使用margin-* 属性，它仍然会被推送。top 作为一个定位属性，对于不同的位置类型表现得不同。此外，在这篇文章中，请看这些位置属性是什么，以及它们的行为方式。
static 位置
static 属性是每个元素的默认位置值。对于这样的元素，它们会按照它们在文档中的顺序放置。具有讽刺意味的是，这样的元素并不被看作是定位元素。这是因为它们是按照文档的流程放置的，而且它们不能离开这个流程。这意味着像top 这样的属性对它们不起作用。如果你把这样的属性作为一个样式声明来应用，你会看到什么都没有。然而，像margin-* 这样的属性可以用在它们身上，就像我们在上面几段看到的那样，这样的属性只会推动元素，从而影响周围的元素。
relative 定位
对于relative 定位的元素，它们在文档中保留其顺序。这意味着它们以它们在文档中所占据的空间为界：
屏幕截图显示了相对定位的蓝色块的边界
如上图所示，第一个块占据了总宽度（因为它是一个块元素）。 但是，相对属性的内容还有很多。正如你可能已经猜到的，它们可以使用 top 属性重新定位 。 当你 对 top 和left属性应用一个值 100px ，它就会以从顶部边界开始的100px的顶部距离和从左侧边界开始的100px的左侧距离重新定位该元素，
截图显示了相对定位的蓝色块的当前位置和先前位置之间的距离
absolute 位置
一个absolute 值定义了一个元素的位置。这和relative 位置的区别在于。
- 绝对元素的边界是不同的
- 绝对元素被从文档的流程中移除
绝对元素可以以父元素或视口为界。视口是默认的边界。父元素只有在有相对位置时才能成为边界。记住，静态（默认位置）元素不能被定位。因此，它们不能作为边界。但是当你对一个元素应用relative 的位置时，它可以作为absolute 定位元素的边界。假设蓝色块有一个absolute 的位置，有一个100px 的left ，有一个100px 的right ，有一个relative 的父级，这里有一个插图，可以直观地看到它的边界：
截图显示了绝对元素的边界，如果有相对的父元素或没有的话
正如你注意到的，绿色块移动到了父元素的顶部。这是因为蓝色块被从流程中移除。周围的元素不再尊重该块，因为它似乎是不可见的。然而，在DOM中，蓝色块在绿色元素之前。它只是在视觉上失去了它的顺序。蓝色块尊重它能找到的最接近的相对父元素作为其边界，否则，尊重视口作为边界。如果对顶部属性应用一个100px 的值，类似于relative ，值，它从边界的顶部移动的距离是100px 。
fixed 定位
fixed 定位的元素与 元素类似。它们被从文档的流程中移除，但与后者相反，它们不尊重 父母作为边界。它们只有一个边界--视口。当你将 的值应用于 属性时，该元素从视口的顶部移动到 。absolute relative 100px top 100px
sticky 定位
sticky 定位的元素有点棘手。它们是 position和 position的组合。该元素的行为就像一个相对定位的元素，在某个点上，成为一个固定的位置。这个点必须明确指定，否则，它的行为完全像一个相对元素。粘性元素是以父元素为界的。为了更好地理解这个属性，让我们假设一个元素有以下的样式声明。fixed relative
<span class="hljs-selector-class">.element</span> {
<span class="hljs-attribute">position</span>: sticky;
<span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
}
上述声明将该元素视为位置相对，但只要该元素到达顶部边界，它就表现为一个固定元素。它保持固定，直到父元素在视口中不再可见。
这意味着
- 安装时是相对的
- 当满足指定的位置条件时是固定的(如
top: 0) - 当父元素不再出现在视图中时是相对的
这个Codepen演示是一个来自CSS Tricks的演示，它展示了粘性属性是如何工作的。要想看到它的实际效果，请向下滚动演示网页，看看当父代处于视图中时，元素是如何附着在上面的。
回顾一下
position 属性被用来定义一个元素在文档中的放置方式。每个元素的默认位置是static ，而讽刺的是，static 元素不被认为是positioned 。静态元素是按照它们在DOM中出现的方式放置的，因此，top ，对它们没有任何影响。其他的位置类型使元素 "被定位"，这使得对它们使用像bottom 这样的属性成为可能。
在这篇文章中，我们已经看到了对CSS中使用的5种位置类型的深入解释。static 是唯一的非位置属性。其他的是，但是，它们的行为与定位属性不同，如top 、bottom 、left 和right 。
注意事项
static属性只定位源代码中指定的元素。relative属性通过它在网页中占据的空间来限定一个元素。absolute属性通过最接近的父元素或视口来限定一个元素，同时也从流中移除该元素。fixed属性的行为与absolute相似，但它只通过视口来约束一个元素。sticky属性是relative和fixed的组合，它保持一个元素的相对性，直到满足一个位置条件，所有这些都是在父元素是可见的。
另外，请注意，margin-* 属性对sticky,static, 和relative 元素的行为是一样的--把它们从当前位置推到另一个位置，同时影响周围的元素--因为它们在文档中保留了它们的流程。对于失去顺序的fixed 和absolute ，margin-* 的工作方式相同，但不影响任何其他元素。
