当前位置:首页 >> HTML+CSS>>正文

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

栏目:HTML+CSS时间:2017-02-24热度:
本文标签: CSS z-index 堆叠顺序

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


QQ截图20170224092018.jpg


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

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

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

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


热门标签