css提高篇(2)z-index与position属性的巧妙应用
将falsh置于最底层
在falsh中加一参数:<param name="wmode" value="Opaque">
篇教程中,你将学会如何合理运用z-index属性,以及position属性,来遮挡你想遮挡的任何东西~
实例中,我将用本站遮挡googlead中显示googlead字样,向大家做一详细介绍.
(注意,本站内任何原创教程都可随意转载,但必须遵循创作共同协议,请完整保留截图/出处/作者/网址)
当你浏览本站左处aboutme版块下我的照片那部分时,会惊奇的发现广告显示出来后,并没有ads by googlead的字样.这就是层位置的一个巧妙的应用.
首先我们来看图做个比较.
<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 300pt; HEIGHT: 279.75pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www.716000.com/blog/attachments/month_0612/p2006121604623.gif" src="file:///C:/DOCUME~1/LIUXUE~1/LOCALS~1/Temp/msohtml1/02/clip_image001.gif"></imagedata></shape>
在写样式前,广告上的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手册中的部分(本站下载区已经提供了苏<personname w:st="on" productid="沈小雨">沈小雨</personname>先生的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 。