[CSS]CSS Position 详解
一. CSS position 属性介绍
CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed四种取值，默认是static。
二. position: static
static：没有定位，元素出现在正常的文档流中，忽略left，right，top，bottom和z-index。
![[CSS]CSS Position 详解](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiZ1ArsbiLzA83Y4X781gOgV4VvkHnoVRfnk0tIzYtxY6zZJCIvA5exB4bzWMb5pgDU.jpg "[CSS]CSS Position 详解")
所以对元素position属性设定static时，left属性不起作用，但是元素出现在正常的流中。
三. position: fixed
fixed：生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。
![[CSS]CSS Position 详解](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiZEotI3xsGZGP0nF0EUUXRNQQEKJPqJ4fInWxqyCTPKSEsCGUOOqNjEpurLYkdxM4w.jpg "[CSS]CSS Position 详解")
窗口滚动不会影响content元素位置，content元素一直在contaniner元素的右下角。
四. position: relative
reletive：元素相对其自己正常位置定位，元素在正常的文档流中。
![[CSS]CSS Position 详解](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiYfGur4EZklj6Saa1MZB2MJoJtUnJLLn43Fd7oCkuPLcIl_nwqkgsaW78tiA1hWtRA.jpg "[CSS]CSS Position 详解")
没有设置left和top时的正常位置。
![[CSS]CSS Position 详解](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAia_7-1hGIImTkAJSZprWJQWItA8460uKZfmeM5CxJeMqY_41LaELq1yCU_vtf868RM.jpg "[CSS]CSS Position 详解")
设置了left和top属性，元素位置移动，向右移动50px，向下移动20px。但是元素预留的空间保持正常流动，也就是不会对其他元素产生影响。
五. position: absolute
absolute：元素绝对定位，相对于static定位以外的第一个父元素，元素脱离文档流。
![[CSS]CSS Position 详解](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiYMmr6omsr_oWfMfmA0or-L29GgKljvtBCB4Xfqqw_82Z1mo-k-8pMzedie7X8IAEE.jpg "[CSS]CSS Position 详解")
所以会找到static定位以外的第一个父元素，因为span的父元素content和container都没有设置position属性，默认为static，找到的第一个父元素就为html<body>，相对于<body>向左移动100px。
如果对content或container设置position属性为relative，absolute或fixed，span会相对于content或container来定位。
以下是三个例子，
![[CSS]CSS Position 详解](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiaMB9VzDpO-nYcKmyDe2JUIc7pl9vjbcjOVfzXsnkvMLcAgDkMmdP-gP4Nkh9dhrSM.jpg "[CSS]CSS Position 详解")
span元素的第一个position属性不为static的父元素是content，所以相对于content向左移动10px。
![[CSS]CSS Position 详解](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiaTXz-9Lt47_89ZV2hy1q-zosHH8bcKBYnB-vut0IMNr2f0ApKLAwDbS0TptZhSO9c.jpg "[CSS]CSS Position 详解")
当content属性设置为fixed时，span元素相对于content向左移动10px。
![[CSS]CSS Position 详解](https://cdn.ancii.com/article/image/v1/Qj/zb/RO/ORzjbQVFJasX5aR2DaTg2_Zx5KSH75KdTtVIpx5BAiYForCrpJ25E8q6BdV5NwfLnaADW_WgmSu8fOxkGI_yOaYh51hFwEM1YklvLW3UhPY.jpg "[CSS]CSS Position 详解")
span元素第一个position属性不为static的父元素是container，所以相对于container向左移动10px。
六. 总结
position: static，元素出现在正常的流中，无法通过left，right，top和bottom设置元素定位。
position: fixed，元素脱离文档流，相对于浏览器窗口定位不变。
position: relative，元素出现在正常的流中，相对于其正常位置定位。
position: absolute，元素脱离文档流，相对于static以外的第一个父元素定位。
理解了position的属性，可以更好的设计页面和实现页面。