今日讲解CSS position定位（5种方式）

CSS中的position属性用于设置元素在页面上的位置，您可以将此属性放置在所需位置。“位置”属性有五个可选值，分别对应于五种定位方法:

1. 静态定位：static

static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响。示例代码如下：

运行结果如下图所示：

图：静态定位

2. 相对定位：relative

相对定位就是元素相对于自己默认的位置来进行位置上的调整，您可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。

图：top、bottom、left、right 属性演示

【示例】下面通过代码来演示相对定位的使用：

运行结果如下图所示：

图：相对定位

注意：相对定位的元素可以移动并与其他元素重叠，但会保留元素默认位置处的空间。

3. 绝对定位：absolute

绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。

图：top、bottom、left、right 属性在绝对定位中的使用

使用绝对定位的元素会脱离原来的位置，不再占用网页上的空间。与相对定位相同，使用绝对定位的元素同样会与页面中的其它元素发声重叠，另外使用绝对定位的元素可以有外边距，并且外边距不会与其它元素的外边距发生重叠。

【示例】下面通过示例来演示绝对定位的使用：

运行结果如下图所示：

图：绝对定位

4. 固定定位：fixed

固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。

【示例】下面通过示例来演示固定定位的使用：

运行结果如下图所示：

图：固定定位

5. 粘性定位：sticky

粘性定位与前面介绍的四种定位方式不太一下，它像是相对定位和固定定位的结合体，当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果。比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面时它又会固定在页面的最顶端。

【示例】下面通过示例来演示粘性定位的使用：

运行结果如下图所示：

图：粘性定位

在使用粘性定位时，需要注意以下几点：

• 在设置position:sticky;时，必须再定义 top、bottom、right、left 四个属性之一，否则只会处于相对定位；
• 使用固定定位元素的父元素不能定义overflow:hidden或者overflow:auto属性；
• 父元素的高度不能低于固定定位元素的高度；
• 固定定位的元素仅在其父元素内有效。