CSS定位终极指北

CSS 中的 position 属性只有几个有效值，但这些值有无穷无尽的设计可能性，这也使得学习定位比较困难。

一、静态定位

首先，将介绍最容易被忽略但又是你一直使用的定位值，这就是static。static是 position 属性的默认值，本质上只是意味着元素将遵循正常的文档流并根据标准定位规则定位自身。

未设置定位属性的任何元素都将是static，也就意味着我们使用的大多数元素都是静态定位。static定位元素不能应用z-index、top、left、right或bottom属性。

.one{
    position: static;
}

二、相对定位

下一个比较简单的定位类型是relative。relative定位元素的工作方式与static完全相同，但我们可以向其添加z-index、top、left、right和bottom属性。如果你在不设置任何这些额外属性的情况下定位元素为relative，它看起来与static定位元素完全相同。这是因为relative定位元素也遵循正常的文档流，不同之处在于可以使用top、left、right和bottom属性来偏移它们。

.one {
    position:relative;
}

.one{
    position: relative;  
    top: 30px;  
    left: 10px;
}

从上面的示例中，你可以看到一个没有定义额外的属性的relative元素的工作方式就像static一样。但是，一旦添加了left, top或之类的属性，元素将会通过这些top, left,right和bottom属性相对于其正常位置进行偏移。

现在，在元素自身设置relative定位作用不大，因为我们不想在不移动它周围的所有元素的情况下去偏移一个元素。relative定位的主要应用是设置元素的z-index，或者用作absolute定位元素的容器，后续将进行讨论。

三、绝对定位

当元素绝对定位时，会从文档流中完全删除。如果你给一个元素绝对位置，其他所有元素都会表现得好像绝对定位的元素不存在一样。

.one{
    position:absolute;
}

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

.one{
    position:absolute;
    top:0;
    left:0;
}

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

.purple-parent {  
    position: relative;
}
.one {  
    position: absolute;  
    top: 0;  
    left: 0;
}

通过将紫色父元素设置为相对定位，强制绝对定位的子元素位于父元素的左上角而不是body。这种相对定位和绝对定位的组合使用是很常见的一种方法。

四、固定定位

下面分享一个用的比较少的定位值，即固定定位。固定定位有点像绝对定位，因为它从文档流中删除了元素，但固定定位的元素总是相对于屏幕定位，无论其父元素在什么位置。

.one {  
    position: fixed;  
    top: 0;  
    left: 0;
}

五、粘性定位

最后分享粘性定位。这个定位是固定定位和静态定位的结合，它结合了两者的优点。粘性定位的元素将充当静态定位元素，但是当页面滚动到该元素指定的顶部、左侧、右侧或底部值的点，它将像一个固定定位的元素一样不会移动。

.one {  
    position: sticky;  
    top: 10px;
}

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

粘性定位通常用于导航栏、长列表中的标题等场景中。

六、绝对/固定定位的高级应用

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

.purple-parent {  
    transform: translateX(0);
}
.one {  
    position: absolute;  
    top: 0;  
    left: 0;
}

在上面的例子中，紫色父元素默认为静态定位，但由于它有一个transform，所以它充当了绝对定位子元素的容器。

同样的事情也适用于固定定位的元素。这也使得固定定位元素的滚动行为不再起作用。

.purple-parent {  
    transform: translateX(0);
}
.one {  
    position: fixed;  
    top: 0; 
    left: 0;
}

即使在我们滚动页面时，你也会注意到固定定位元素卡在紫色父容器内，因为它具有transform属性。这当然不是我们想要的，所以这也就是为什么最好始终在最高级定义固定定位元素以避免这种潜在的错误。

CSS 中的 position 属性只有这几个值，但每个值在什么时候使用以及如何使用都有很多细微差别。这会导致很多复杂性，但也有很多潜力等待被发现！

希望对你能有帮助哦，感谢阅读～