在实际的开发中，我们经常会遇到这样的问题，在一个overflow为hidden的元素A里面有一个基于A绝对定位的元素B，在A的宽高固定切小于B的内容宽高的情况下，想要全部展示出B元素的全部内容就不行了，因为B是依赖A定位，所以B没办法逃逸出A，这似乎无解，这篇文章就讲解一下如果让B逃逸出A。

在没有对absolute做深入的了解之前，我们在使用absolute定位属性的时候，一般的做法都是会给父元素或者祖先元素设置position:relative定位属性，然后基于父级元素或祖先元素通过设置top/right/bottom/left方向值来定位，有的时候甚至设置会层级关系的z-index属性值。但是，定位不只是只能通过absolute，relative，fixed来定位，还可以使用margin和translate等来给元素定位，总之，absolute作为一个独立的css的属性值，其样式和行为表现是可以不依赖其他任何css属性完成。下面我们就来具体看一下B是如何逃逸出A的，也就是absolute的无依赖定位。

我们所熟悉的absolute的定位都是基于其外层第一个非static定位的元素定位的。

无依赖的绝对定位相对的参考点和我们熟知的绝对定位的参考点不一样，它是相对其自身在页面中的位置来定位的，这点和fixed有点像，但是无依赖定位不是通过top/right/bottom/left来定位的，而是通过margin，translate来弄的。

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

应用：

1、导航图标定位

关键的HTML结构和CSS样式：

2、搜索框的下拉列表

关键的HTML结构和CSS样式：