css中z-index与position

 

css提高篇(2)z-index与position属性的巧妙应用

将falsh置于最底层

在falsh中加一参数:<param name="wmode" value="Opaque">

篇教程中,你将学会如何合理运用z-index属性,以及position属性,来遮挡你想遮挡的任何东西~

实例中,我将用本站遮挡googlead中显示googlead字样,向大家做一详细介绍.
(注意,本站内任何原创教程都可随意转载,但必须遵循创作共同协议,请完整保留截图/出处/作者/网址)

当你浏览本站左处aboutme版块下我的照片那部分时,会惊奇的发现广告显示出来后,并没有ads by googlead的字样.这就是层位置的一个巧妙的应用.

首先我们来看图做个比较.



在写样式前,广告上的ADS标志非常醒目,本来上面是我的照片,下面再多出来那些GOOGLEAD的字样显得的确太难看了,想想应该把ads by googlead字样给遮住,嗯,在应用了样式后,看看修改后效果,是不是很不错啦.

OK,我们要做的第一步就是把图片和广告分别放入两个DIV中.原理就是DIV1遮住DIV2部分.
(由于方便修改起见,我在本例中采用了CSS内联法,如果还不知道内联法是什么东东可以看我昨天写出的一入世关于CSS三种方法的文章)

看看,目光测量一下,ads by googlead这些字样应该有个15px-20px的距离.

因此我们要做的是上一个DIV遮住下面DIV距离差不多20象素部分.原理明白了,大家接着往下看.

我们给第一个div模块写上如下代码:
<div style="position:relative;width:150px;z-index:2;">

给第二个DIV模块写上如下代码:
<div style="position:relative;width:150px;z-index:1;top:-20px;">

(注意:这里最好不要给z-index取值为0,一开始我取为0后,IE里显示正常,而到了FIREFOX后却是下层遮挡了上层,难道FIREFOX认为0比1大?反正偶们不用就是了)

呵呵,典型的内联法.让我们来看看到底是什么意思?
第一个DIV模块中,我们定义了宽度为150,z-index:1 inherit;此DIV的级别为1
第二个DIV模块中,我们定义了宽度亦为150,z-index:2 inherit;此DIV级别为0,top:-20px垂直向上-20象素.
1>0
上面的DIV模块级别高于下面的DIV模版级别.所以,我们在position:relative;中可以体会到是上一层遮住了下一层.并且遮住了我们设定的20象素的区域.

下面摘自苏沈小雨CSS手册中的部分(本站下载区已经提供了苏 沈小雨 先生的CSS2.0手册),详细介绍position属性.
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

取值：
static  : 默认值。无特殊定位，对象遵循HTML定位规则
absolute  : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed  : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative  : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置




接下来,我们再来看看z-index的用法及属性解释:
语法：
z-index : auto | number
取值：
auto  : 默认值。遵从其父对象的定位
number  : 无单位的整数值。可为负数

说明：
检索或设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。
这个属性不会作用于窗口控件，如 select 对象。
在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 zIndex 。