不依赖relative的绝对定位absolute

在没有深入了解absolute之前，我在使用absolute定位属性的时候，一直都是会给父元素或者祖先元素设置position:relative定位属性，以及设置absolute定位元素的top/right/bottom/left的方向值，有的时候甚至设置层级关系的z-index属性值。

我们对于上述absolute属性的认知和使用其实是不正确的，它是可以不依赖relative进行使用，可以理解为无依赖的绝对定位。

absolute属性是独立的css属性值，其样式和行为表现可以不依赖其他任何css属性完成。

1、简单定义

给元素设置absolute定位属性，不通过top/right/bottom/left去控制元素位置，而是通过margin或者transform来控制。

2、相对特性

我们通常熟知的一个元素使用了absolute绝对定位的话，它是相对于static定位以外的第一个祖先元素进行定位的。

无依赖的绝对定位相对的参考点和我们通常熟知的绝对定位的参考点不一样，它是相对其自身在页面中的位置。

2.1、先看如下的一个需求，在图片的左上角放置一个new的图标，和慕课网的课程列表类似：

2.2、HTML结构如下

2.3、我们常规绝对定位的做法

2.4、无依赖绝对定位的做法

3、不受overflow:hidden的影响

使用无依赖绝对定位的元素是不受父元素overflow:hidden的影响，不会被剪裁。

4、应用场景

4.1、导航图标定位

关键的HTML结构和CSS样式如下所示：

4.2、搜索框的下拉列表

关键的HTML结构和CSS样式如下所示：

4.3、表单错误提示语

关键的HTML结构和CSS样式如下所示：