教你彻底解决css中设置z-index的值无效的问题

http://www.etwiki.cn/css/3030.html
笔者有一个网站,上面挂了百度联盟的广告,今天在看页面时无意间发现,百度联盟的广告被文章中的图片给盖住了,这样不仅影响了百度联盟广告的展示次数,而且还直接影响了网站的外观,最主要的是直接导致联盟点击率的下降,看到这一现象,亦是美网络第一想到的是给广告所在的div代码层里添加z-index代码,以使广告代码永远展示的层的最上面,不料,无论我将z-index的值修改的多大,广告代码依然被文章的图片所覆盖着。
于是就郁闷了,只好上网去查html代码和css样式相关的知识,最终还是找到了原因所在,并且完美解决了这个问题,因为笔者在查找的过程中发现有不少人都在为这个问题而疑惑,所以感觉有必要将问题的解决办法给大家分享一下,好了,废话不多说,进入正题。
在使用z-index这个属性之前,我们必须先了解使用z-index的必要条件:
1、要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:relative(定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed)样式。
2、不要给想控制“上、下”的元素设置z-index,而是对他们的父容器设置z-index样式。
看懂了以上两点,我们就明白了如何才能使用z-index这个属性,那就是我们在使用z-index前,先将元素定位,例如position:relative;然后再后面再添加z-index:2000就OK了。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>