CSS：定位属性=定位模式+边偏移

边偏移：

top、bottom、left、right  相对于父级元素

 

定位模式：

static、relative、absolute、fixed

 

1.static 静态定位

① 即在页面中的默认位置。静态定位是元素默认的定位模式。 

②静态定位对于边偏移无效。 position:static; left:100px; right:150px; 仍然在默认位置，因为left、right只是在定位的时候会有作用。

③用于清除定位。

④标准流

 

2.relative 相对定位

①每次移动在  自己原来位置  的基础上移动。

②可以通过边偏移移动位置。但原位置依然被占有，后面元素不会取代其原来占有的位置。

③标准流

 

3.absolute 绝对定位

①脱离标准流位置，不在页面占有位置。

②相对于父级元素。如果父级元素没有定位，则以浏览器为标准。原位置不再被占有，后面元素会取代其原来占有的位置。

   父亲：relative 或者 absolute    孩子：absolute(left:15px;right:15px;)           即 子绝父相 或 子绝父绝

③子绝父相。 （可用于 轮播图+"<" +">"  ， 以及div左上角的标签     ）

        相对定位：占有位置，不脱标

        绝对定位：不占有位置，绝对脱标

④ 加了绝对定位的盒子，margin左右auto无效。

     定位的盒子也可以水平或者垂直居中。如： 首先left：50%；（父盒子的一般大小），然后margin-left:50px;(如果盒子的width是100px)。

      

（图片来自：https://www.bilibili.com/video/av15269197?t=95&p=173）