css中设置z-index不起作用的解决办法

今天在写一个首页的时候,发现了一个情况:导航的下拉菜单会被banner图挡住。我便去设置z-index属性，但是却没有成功，几经试验后发现了解决css中z-index无效的方法。

1487899314655545.jpg

想要z-index起作用，需要做到以下两点条件：

1.在添加z-index之前，需要给元素设置一个postion:relative(定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed)样式。

2.应该给想控制堆叠顺序的元素父级容器设置z-index样式。（这一点网上有说需要两个比较堆叠顺序的容器在一个层级上）

做到了以上这两点，我的导航下拉菜单被banner挡住的问题就解决了。