position:relative/absolute无法冲破的等级
作者:小毅 来源:蓝色经典 发布时间:2007-05-11 17:03:00
小毅的blog:http://andymao.com/andy/
注:本文实例在IE5.x下可能会显示不出来,请使用IE6、IE7、Firefox、Opera等浏览器来调试!
前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:
<ul>
<li>第一块</li>
<li><span>第二块</span></li>
<li>第三块</li>
<li>第四块</li>
<li>第五块</li>
</ul>
如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。
*{margin:0; padding:0; list-style:none;}
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
li span {width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}
运行代码框
试一下很容易发现我们的子级,z-index的值达到了1000的被设定了position:absolut;子级都被档在了父级的下面。我想了很久,我觉得其根本问题是:设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的。我们上面的例子中的第一个LI的等级永远都要小于后一个LI的等级,所以我们在LI里的子级身上设置了position:absolute;,给了非常高的z-index值。
也许你会这样来想:只要针对有span的LI设置position:relative;不就好了吗?非常正确。当其它的LI都不设置position:relative;那么我们需要的那个子级就可以浮在所有的内容之上。但是如果实际上,所有的LI中都要有span,并且属性都需要一样怎么办?当然我们不大会需要有这样的效果。但是我们需要有这样的效果:子级全部是隐藏的,当有鼠标反应时出现并且浮在所有的内容之上。我们要知道,这确实是件让人头疼的事,因为我们上面见识到了,子级在显示的时候都被压在了下一个父级标签的下面。下面我们来实现一下这个鼠标反应的定位效果:
<ul>
<li><a href="" title=""><span>第一块</span></a></li>
<li><a href="" title=""><span>第二块</span></a></li>
<li><a href="" title=""><span>第三块</span></a></li>
<li><a href="" title=""><span>第四块</span></a></li>
<li><a href="" title=""><span>第五块</span></a></li>
</ul>
我们通过链接的鼠标事件来完成这个显示隐藏效果:
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}
li a:hover {background:#000000;}
li span {display:none;}
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000; }
运行代码框
我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性,然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果,我们会发现,所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢,其实以CSS想强行突破是不太可能,所以我们反过来想,能不能让这个没有被触发的父级标签没有position:relative;属性,而只是触发的时候才有级这个父级赋上这样的值?其实想到这里基本上已经可以解决所有的问题了:
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {display:block; height:100px; width:100px; background:#000;}
li a:hover {position:relative; z-index:1; }
li span {display:none;}
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
运行代码框
我们只要针对a:hover来设定其属性为position:relative;就可以了,这样只有在鼠标触发的时候A才会被赋于一个相对定位的属性。这样就完成可以解决被其它父级标签所挡的尴尬了。
当然如果不介意IE6或是IE5.X这样的浏览器我们还可以把代码再做简化:
<ul>
<li><span>第一块</span></li>
<li><span>第二块</span></li>
<li><span>第三块</span></li>
<li><span>第四块</span></li>
<li><span>第五块</span></li>
</ul>
CSS可以改成这样:
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
li:hover {position:relative; z-index:1;}
li span {display:none;}
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
运行代码框
猜你喜欢
- ASP中的全角和半角转化函数,使用方法,传入要转换的字符给str即可,flag设置要转换的类型。<% Function&n
- asp之家注:作为一个学习asp的爱好者,相信一定接触过session,我们经常使用session来作为会员登录的验证,当然也可以使用COO
- 今天在工作中遇到了一个问题,需要按时间查询,可是查询出来的结果显示的不正确。举个例子来说,要查找出2007-10-12至2007-10-31
- 由于系统自带的MySQL默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过程
- 本文说明向外扩展数据库系统的两个选项,从而实现更高的可扩展性:水平数据划分和垂直数据划分当我提到向外扩展数据库系统时,我实际上只是讨论对数据
- 最近经常使用字符串查找功能。 包括 1、全匹配查找字符串 2、模糊查找字符串 CHARINDEX 和 PATINDEX 函数都返回指定模式的
- 首先选择操作系统。由于ASP属于MS(Microsoft)的东西,所以我们要选择MS的操作系统,Windows 98以上就可以(
- 网站的改版和重新设计总是一件让人激动的事情,上到老板,下到设计师。更漂亮!更强大!更人性化……参与设计者一定有着无数为新版本骄傲的理由,然后
- 1、设置web.config文件。以下为引用的内容:<system.web> ...... <globalization
- 在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的
- 见下,把数字转成条形图、条形码的一个程序:<%Sub ShowChart(ByRef aValues,
- 在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很重要的概念。javascript中的事件处理也是一样,正因为有了事件处理,才会
- 美化主要表现在鼠标放到菜单上后(即鼠标悬停)的效果,这里首先介绍几个经常用到的CSS属性:backgr
- 阅读上一篇:定义网页的语言编码 用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计
- 1.基本结构 create OR REPLACE PROCEDURE存储过程名字 ( 参数1 IN NUMBER, 参数2 IN NUMBE
- 我们有时候看到一些文章因为一行的字符超长而把一些表格或DIV撑开或字符写到溢出了.如何防止表格防止撑开,表格不被内容撑开,单行字符超长div
- 很多时候,设计师们都会通过各种渠道去了解用户的需求,然而从这些渠道反馈回来的信息大部分只是用户的期望并不是真正的用户需求,但是很多时候这些期
- Mr.Think是一个喜欢简洁的人,喜欢如诗一样的代码.不喜欢.NET的代码,就是因为经常看到同事用VS后生成出来的一段段冗长的代码.在我的
- SQL Server数据库动态交叉表的参考示例:--建立测试环境set nocount oncreate table test(model
- 兼容主流浏览器,独立样式表,可以很方便的进行视觉效果自定义截图:模拟下拉菜单演示代码:<!DOCTYPE html PUBLIC &q