CSS定位教程

CSS定位技术已经存在很长时间了。即使出现了各种新的CSS布局方法，CSS定位技术至今仍然被广泛使用，并且是一门必修课。

订阅频道！

无论选择哪种定位类型，您始终会将元素沿特定方向移动，使其偏离正常的流动方向。我们称之为改变“文档流”。您可以使用 4 个关键字来移动元素。您可以使用正数或负数。该值始终是相对于您选择的关键字的偏移量，正数表示“向内”移动，负值表示“向外”移动。

• 上、右、下、左

（图片来自视频教程）

CSS定位主要有四种类型。我们将逐一介绍，首先是相对定位。

相对位置

相对定位有两个重要方面：

• 相对定位是根据自身进行定位的。
• 相对定位的元素不会从文档流中移除。

绝对位置

绝对定位有两个重要方面：

• 绝对定位是根据父元素的位置来定位的（如果父元素有定位属性）。
• 绝对定位元素将从文档流中移除。

固定位置

固定定位的两个重要方面：

• 固定定位是根据视口（浏览器窗口）进行定位的。
• 固定定位元素已从文档流中移除。

粘滞位置

粘性定位的一个重要方面：

• 粘性定位的行为类似于相对定位，直到它们“卡住”为止，然后它们的行为类似于固定定位（但作用于父元素，而不是视口）。

Z 指数

当你开始移动物体时，不可避免地会出现物体彼此重叠的情况。你需要控制 z 轴上的堆叠顺序。这可以通过 z-index 属性来实现。很简单，z-index 值越高，z- index 值越低，z-index 值就越低。

（图片来自视频教程）