在网页设计中，你放内容的地方和你放内容的方式一样重要。位置可以影响用户体验的各个方面，在web前端学习中，您将了解CSS位置属性以及它如何与HTML页面上的元素一起工作。
CSS位置属性是做什么的？
CSS位置属性帮助您定义要在HTML页面上获取的元素的位置。CSS位置属性有六个值，您可以分配给它来确定定义的位置。了解这些值之间的差异可以让你知道在哪里和何时使用它们。
CSS位置：静态值
这是CSS位置属性的默认值。在这种模式下，目标元素与自然文档流一起定位。请注意，顶部、右侧、底部、左侧以及Z索引属性不会显示任何效果。
CSS位置：相对值
该位置值与静态值非常相同，但是，该值允许上述方向属性对目标元素的位置产生影响。方向属性将元素从其在文档中相对于其自身属性（例如左侧或底部）的自然位置移动。偏移量不影响任何其他元素的位置。想要对CSS有更多的了解，建议参加web前端培训，可以有更全面的认识和理解。
CSS位置：固定值
使用此位置值，目标元素将不包括在自然文档流中。这意味着文件不会像通常那样为布局中的元素固有地创造空间。这些元素相对于文档或初始包含块放置，除非其中一个祖先将转换、透视或筛选器属性设置为非任何对象（请参阅CSS转换规范），在这种情况下，祖先充当包含块。值得注意的是，滚动不会影响具有此CSS位置值的元素。一个固定的元素不会在页面上留下它通常所在的位置的空白。
CSS位置：绝对值
与固定值一样，具有绝对值的元素将从自然文档流中删除，并且在页面布局中不会为元素创建空间。元素将根据最近放置的祖先元素进行定位。如果该选项不可用，则元素将使用文档主体并随页面滚动一起移动。
CSS位置：粘性值
使用粘性值，目标元素从HTML文档的自然流接收其位置。位置的改变是从最近的滚动祖先元素及其包含块中进行的。从某种意义上说，这个值在达到“粘滞”点之前与“相对”相同，偏移量不会影响任何其他元素的位置。你可以把它看作是相对值和固定值的混合体。
理解Z索引属性
Z索引属性处理重叠或可能重叠的元素的位置，这取决于页面的布局，这个位置处理元素相互堆叠的方式，它有助于保持对要显示的元素的可见焦点。用一个较大的Z索引覆盖那些用较小的Z索引覆盖的重叠元素。
把页面上的元素想象成一张卡片。你把其中四个放下来，但要确保王牌总是在最上面显示什么。Z索引属性可以更改堆栈顺序。
每个元素都有一个位置值。请记住，默认值设置为静态。任何具有其位置值更改为静态以外的任何元素都将显示设置为静态的元素。Z索引仅适用于已定位的元素（位置：绝对，位置：相对，位置：固定，位置：粘滞）和弯曲元素（显示的直接子元素：弯曲元素）。否则，所有元素都会出现在页面上，好像它们的位置值设置为静态；因此，与Z指数无关。
尽管CSS提供了所有的工具，但有时很难掌握您控制的内容。
