前端小问题—当弹出框被挡住时

才刚刚开始接触前端一个月，遇到了一些小问题，今天写一写关于弹出框被其它内容挡住的部分。

弹出框的设置方式一般是相对于其父级已定位的元素做绝对定位。

我按照常规，弹出框做了absolute position,父级是一个包含在li中的div 。正常情况，给此div做相对定位，就可以初步设定成功了。可是结果是只有一小部分弹出框露了出来，其它部分都被上下内容遮住了。

查找资料，建议是加大其的z-index,一般都可解决，然而我的问题，还是依然没有变化。

最开始走了些弯路，想更换成其它祖先元素做相对定位，都没有解决问题，也没有从本质找到原因。

其实，我遇到的可能是初学者常遇到的问题。就是这个弹出框，是嵌入在div中，div 的父级的父级元素是ul。为了设置布局，消除ul中的浮动影响，保证ul的高度，我设置了overflow:hidden。就是这句话，虽然让布局完美了，却把“溢出”的弹出框隐藏了。于是我利用了其它方法去消除浮动，设计布局（在ul最后加一个空元素，代码ul:after{content:"";display:block;clear:both;})。这样问题就解决了，既不会影响弹出框，也不会影响布局。

因此，本质上，我设置的绝对定位，并没有错误，而是它的祖先元素里有设置了overflow hidden。下次做浮动消除时，要注意喽！：）