打印

[教程] position:relative/absolute无法冲破的等级

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1126
体力: 1661
威望: 214
当前: 江苏南京
离线: 4 天

专长 网页设计,编辑,项目管理

1^# 大中小发表于 2007-2-12 13:21

注：本文实例在IE5下可能会显示不出来，请使用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; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
*{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; } 
 /*]]>*/
 </style>
</head>
<body>
<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>  
</body>
</html>

提示：您可以先修改部分代码再运行

我们设定了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; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
*{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; } 
 /*]]>*/
 </style>
</head>
<body>
<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>  
</body>
</html>

提示：您可以先修改部分代码再运行

我们只要针对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; }

提示：您可以先修改部分代码再运行

原始阅读：
http://andymao.com/andy/post/67.html

[ 本帖最后由小毅于 2007-3-21 20:28 编辑 ]

本帖最近评分记录

blank 威望 +2 精品文章 2007-2-26 10:21

毅博客 玉振之

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

斜阳一线

初级会员

帖子: 95
体力: 154
威望: 0
当前: 北京西城区
离线: 4 天

2^# 大中小发表于 2007-2-12 13:47

研究的很透彻,赞一个!

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

blank

怿飞

版主

帖子: 2161
体力: 3215
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

3^# 大中小发表于 2007-2-12 13:50

分析的比较透彻，不过对于position:relative的运用的研究应该还可以更深入，感觉position:relative是个比较神秘的属性！

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

请大家尊重和保护奥运知识产权。

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1126
体力: 1661
威望: 214
当前: 江苏南京
离线: 4 天

专长 网页设计,编辑,项目管理

4^# 大中小发表于 2007-2-12 13:52

越来越痛恨IE，太可恶了，基本的效果都实现不了！

定位，一直以来都是一个让人头疼的问题。很神秘以至于很多人都对之敬而远之。

毅博客 玉振之

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

斜阳一线

初级会员

帖子: 95
体力: 154
威望: 0
当前: 北京西城区
离线: 4 天

5^# 大中小发表于 2007-2-12 13:55

痛恨是没有用的,有些朋友不是以标准为标准,而是以IE为标准.
这有什么办法呢,IE毕竟是浏览器的主流.
希望以后M$能更好的配合W3C的标准吧.

TOP

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1126
体力: 1661
威望: 214
当前: 江苏南京
离线: 4 天

专长 网页设计,编辑,项目管理

6^# 大中小发表于 2007-2-12 14:06

我现在用IE7,我觉得已经好多了，至少IE7还能正确显示上面的例子！

毅博客 玉振之

TOP

斜阳一线

初级会员

帖子: 95
体力: 154
威望: 0
当前: 北京西城区
离线: 4 天

7^# 大中小发表于 2007-2-12 14:15

是的,但IE7的普及还需要一个过程.
M$的升级不只是软件,对用户的硬件也提出了更高的要求.
这一次的升级不象WIN2K升到WINXP那样迅速.
单独升级IE的毕竟是少数.个人感觉IE6在一定时期内,还是占据着重要位置.
有些东西我们需要取舍,有些BUG,还需要HACK,头疼.

TOP

babysize

babysize

中级会员

帖子: 308
体力: 287
威望: 2
离线: 99 天

8^# 大中小发表于 2007-2-13 13:50

但是有个大问题………………如果<span></span>里还有<a>的话，就～～～A里是不能包A的，所以还是，失败～～

TOP

michi

初级会员

帖子: 85
体力: 125
威望: 0
当前: 上海杨浦
离线: 119 天

9^# 大中小发表于 2007-2-16 11:02

我正好遇到这个问题了

TOP

blank

怿飞

版主

帖子: 2161
体力: 3215
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

10^# 大中小发表于 2007-2-26 10:25

测试的时候要注意IE6的:hover BUG！
详细请见：http://bbs.blueidea.com/thread-2721472-1-2.html

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

1356803

中级会员

帖子: 149
体力: 247
威望: 0
离线: 25 天

11^# 大中小发表于 2007-2-26 13:17

楼主，其实你的第二段已经做出你所需要的效果了，只是有一个地方的设置出了问题，换个思路，一样能够得到所需要的效果，span之所以设定z-index为最高但还在a的下面，是因为你设置了a的背景色属性，导致浏览器解析出了问题，ff和ie一样，原理我不清楚，自己估计有背景色的被默认为最高显示，我把a的背景色挪动到li上面，一切正常，呵呵，有时候换个思路，就有一次新的发现，欢迎探讨，另，最后一段代码，ie6没认出来你的a

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
*{margin:0; padding:0; list-style:none;} 
li {height:100px; margin:0 5px 0 0; float:left; width:100px;background:#000000;} 
li a {position:relative; z-index:1; display:block; height:100px; width:100px; } 
li a:hover {background:#000000;}
li span {width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000; display:none;} 
li a:hover span {display:block; background:#c00; } 
 /*]]>*/
 </style>
</head>
<body>
<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>  
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 1356803 于 2007-2-26 13:19 编辑 ]

TOP

blank

怿飞

版主

帖子: 2161
体力: 3215
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

12^# 大中小发表于 2007-2-26 13:38

楼上的代码仔细在IE6中测试下还是有问题的！

比如你第一次触发第一个黑格，然后移开鼠标，再将鼠标移到第二个黑格下面，你会发现也可以显示第一个黑格触发的span

[ 本帖最后由 blankzheng 于 2007-2-26 13:40 编辑 ]

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1126
体力: 1661
威望: 214
当前: 江苏南京
离线: 4 天

专长 网页设计,编辑,项目管理

13^# 大中小发表于 2007-2-26 14:07

引用:

原帖由 1356803 于 2007-2-26 13:17 发表
楼主，其实你的第二段已经做出你所需要的效果了，只是有一个地方的设置出了问题，换个思路，一样能够得到所需要的效果，span之所以设定z-index为最高但还在a的下面，是因为你设置了a的背景色属性，导致浏览器解 ...

这里你可能没有理解，由于这个例子过于简单了，所以你的那样修改只是一个障眼法，如果例子复杂一点可能又不对了，下面我把HTML结构中的A中加一些文字你再看看，你就清楚是怎么回事了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
*{margin:0; padding:0; list-style:none;} 
li {height:100px; margin:0 5px 0 0; float:left; width:100px;background:#000000;} 
li a {position:relative; z-index:1; display:block; height:100px; width:100px; } 
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; } 
 /*]]>*/
 </style>
</head>
<body>
<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>  
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由小毅于 2007-2-26 14:32 编辑 ]

毅博客 玉振之

TOP

1356803

中级会员

帖子: 149
体力: 247
威望: 0
离线: 25 天

14^# 大中小发表于 2007-2-26 14:26

引用:

原帖由 blankzheng 于 2007-2-26 13:38 发表
楼上的代码仔细在IE6中测试下还是有问题的！

比如你第一次触发第一个黑格，然后移开鼠标，再将鼠标移到第二个黑格下面，你会发现也可以显示第一个黑格触发的span

没仔细弄，谢谢提醒，改一下代码应该就没问题了，楼主的代码一样有这个问题

TOP

blank

怿飞

版主

帖子: 2161
体力: 3215
威望: 115
当前: 浙江杭州

专长 前端制作,JS,WAP

15^# 大中小发表于 2007-2-26 14:31

重新优化一下代码就没问题了，对于hover触发隐藏的例子，强烈建议这样书写：

复制内容到剪贴板

代码:

li span {display:none;} 

li a:hover span {display:block;其他所有属性}

修改如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
*{margin:0; padding:0; list-style:none;} 
li {height:100px; margin:0 5px 0 0; float:left; width:100px;background:#000000;} 
li a {position:relative; z-index:1; display:block; height:100px; width:100px; } 
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; } 
 /*]]>*/
 </style>
</head>
<body>
<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>  
</body>
</html>

提示：您可以先修改部分代码再运行

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

TOP

1356803

中级会员

帖子: 149
体力: 247
威望: 0
离线: 25 天

16^# 大中小发表于 2007-2-26 14:37

这样就没问题了，呵呵，多谢楼主指正，这个就不会出现将鼠标移到第二个黑格下面，触发第一个黑格的span

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
  *{ margin:0; padding:0; list-style:none;} 
  div { margin:50px auto; width:700px; background:#f6f6f6; border:1px #ccc solid;}
  ul { margin:20px;}
 ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
  li { width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left;}
  li a { color:#fff; display:block; width:100px; height:100px;}
  li a span { display:none;}
  li a:hover { background:#ccc;position:relative; z-index:1;}
  li a:hover span { position:absolute; width:205px; height:200px; top:0; left:105px; display:block; background:#f60; z-index:999;}
</style>
<title>无标题文档</title>
</head>
<body>
<div>
	<ul>
		<li><a href="#" title="">111<span>11111</span></a></li>
		<li><a href="" title="">222<span>22222</span></a></li>
		<li><a href="" title="">333<span>33333</span></a></li>
		<li><a href="" title="">444<span>44444</span></a></li>
	</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 1356803 于 2007-2-26 14:50 编辑 ]

TOP

1356803

中级会员

帖子: 149
体力: 247
威望: 0
离线: 25 天

17^# 大中小发表于 2007-2-26 14:53

引用:

原帖由 blankzheng 于 2007-2-26 14:31 发表
重新优化一下代码就没问题了，对于hover触发隐藏的例子，强烈建议这样书写：

li span {display:none;}
li a:hover span {display:block;其他所有属性}

修改如下：

<!DOCTYPE html PUBLIC " ...

你还是没有解决楼主说的a带链接文字的问题，呵呵，重叠了，我开始也没有注意那个，再看看我发的那个没问题的代码，有问题共同研究

TOP

小毅 [楼主]

悟禅布衣

荣誉管理团队

帖子: 1126
体力: 1661
威望: 214
当前: 江苏南京
离线: 4 天

专长 网页设计,编辑,项目管理

18^# 大中小发表于 2007-2-26 15:10

引用:

原帖由 1356803 于 2007-2-26 14:37 发表
这样就没问题了，呵呵，多谢楼主指正，这个就不会出现将鼠标移到第二个黑格下面，触发第一个黑格的span

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

现在改好的这个，与倒数第二个例子就是一回事！

毅博客 玉振之

TOP

1356803

中级会员

帖子: 149
体力: 247
威望: 0
离线: 25 天

19^# 大中小发表于 2007-2-26 16:34

引用:

原帖由小毅于 2007-2-26 15:10 发表

现在改好的这个，与倒数第二个例子就是一回事！

仔细看了是一样的，但是你忘了清除浮动，hoho，粗心还是懒得打了？我看你最新发的那个指出我错误的那个例子里，也会出现span的问题，所以我试着做的这个例子，你误会了。另，我用overflow:hidden的方法在ul上清除浮动，span高就不为200px；超过a的长度100px，其余的就被砍掉了，呵呵，解释一下？

TOP

309172270

初级会员

帖子: 24
体力: 61
威望: 0
离线: 168 天

20^# 大中小发表于 2007-2-26 21:33

postion：reletive属性不是不能定义z-index吗！不是只有absolute才有吗

TOP

cvvi

新手上路

帖子: 68
体力: 47
威望: 0
离线: 1 天

21^# 大中小发表于 2007-2-27 10:54

引用:

原帖由 309172270 于 2007-2-26 21:33 发表
postion：reletive属性不是不能定义z-index吗！不是只有absolute才有吗

relative absolute都能定义z-index

TOP

lanqi

中级会员

帖子: 92
体力: 247
威望: 0

22^# 大中小发表于 2007-2-27 16:02

又学到东西了

－－陷于蓝－－

TOP

yunduan

初级会员

帖子: 35
体力: 52
威望: 0
离线: 94 天

23^# 大中小发表于 2007-2-27 18:37

ha 又发掘了

1234567890

TOP

esnak

中级会员

帖子: 295
体力: 465
威望: 0
离线: 19 天

24^# 大中小发表于 2007-2-27 20:09

佩服楼主的研究精神,学习了

jgwy-esnak

TOP

winhero_charles

幽谷鸟

银牌会员

帖子: 881
体力: 1820
威望: 2
当前: 广东东莞
离线: 10 天

25^# 大中小发表于 2007-2-28 11:54

中英菜单

好贴,学习完此例,可以制一个中英文菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
*{margin:0; padding:0; list-style:none;color:white} 
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;text-align:center;} 
li a:hover {background:#000000;}
li span {display:none;} 
li a:hover span {display:block; background:#c00; width:100px; height:100px; position:absolute; top:0; left:0px; z-index:1000; text-aligbn:center;} 
 /*]]>*/
 </style>
</head>
<body>
<ul> 
<li><a href="" title="">One<span>一</span></a></li> 
<li><a href="" title="">Two<span>二</span></a></li> 
<li><a href="" title="">Three<span>三</span></a></li> 
<li><a href="" title="">Four<span>四</span></a></li> 
<li><a href="" title="">Five<span>五</span></a></li> 
</ul>  
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 winhero_charles 于 2007-2-28 13:39 编辑 ]

TOP

14px

秋末

高级会员

帖子: 257
体力: 545
威望: 0
当前: 湖南长沙
离线: 1 天

专长 网页设计,UI,前端制作

26^# 大中小发表于 2007-2-28 20:00

精辟``````我也常遇到类似的事情，受教。

从容不易

TOP

yougucaofan

银牌会员

帖子: 1168
体力: 2136
威望: 0
离线: 23 天