教你彻底解决css中设置z-index的值无效的问题-网站优化与运营 -亦是美网络

亦是美网络

致力于操作系统应用与计算机网络技术的IT网站。

站内搜索


最新文章

推荐文章

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

笔者有一个网站,上面挂了百度联盟的广告,今天在看页面时无意间发现,百度联盟的广告被文章中的图片给盖住了,这样不仅影响了百度联盟广告的展示次数,而且还直接影响了网站的外观,最主要的是直接导致联盟点击率的下降,看到这一现象,亦是美网络第一想到的是给广告所在的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了。

上一篇:最快捷最简洁的用U盘安装原版windows7 32位/64位系统
下一篇:关于百度联盟增加主题描述产品悬停投放方式的详解

亦是美网络,成立于2012年12月5日,是一个致力于操作系统应用与计算机网络技术的综合IT网站,为大家不断提供和推荐有用的网络教程与技术。

本站文章归<亦是美网络 www.yishimei.cn>版权所有 网站地图 联系我们 豫ICP备12013471号-4 豫公网安备41078202000395号