position:relative/absolute无法冲破的等级

注:本文实例在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;}

/**/

  • 第一块
  • 第二块
  • 第三块
  • 第四块
  • 第五块

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

提示:您可以先修改部分代码再运行
试一下很容易发现我们的子级,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; }

/**/

  • 第一块
  • 第二块
  • 第三块
  • 第四块
  • 第五块

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

提示:您可以先修改部分代码再运行
我们设定了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; }

/**/

  • 第一块
  • 第二块
  • 第三块
  • 第四块
  • 第五块

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

提示:您可以先修改部分代码再运行
我们只要针对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; }

*{margin:0; padding:0; list-style:none;}
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left;}
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; }

  • 第一块
  • 第二块
  • 第三块
  • 第四块
  • 第五块

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

提示:您可以先修改部分代码再运行
原始阅读:
http://andymao.com/andy/post/67.html

时间: 2007-03-08

Android入门之RelativeLayout、FrameLayout用法分析

本文讲述的是Android中RelativeLayout.FrameLayout的用法.具体如下: RelativeLayout是一个按照相对位置排列的布局,跟AbsoluteLayout这个绝对坐标布局是个相反的理解. 在RelativeLayout布局里的控件包含丰富的排列属性: Layout above:选择ID A,则该控件在A控件的上方, Layout below.Layout to left of.等同样用法.使用 RelativeLayout布局的时候,最好在界面设计时 做好布局,

css position: absolute、relative详解

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab

Position属性之relative用法

Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位. absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位的. relative是相对于自己

通过设置CSS中的position属性来固定层的位置

定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" 实例 定位 h2 元素: h2 { position:absolute; left:100px; t

jQuery选择器之属性筛选选择器用法详解

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

CSS中position属性之fixed实现div居中

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

javascript属性访问表达式用法分析

本文实例讲述了javascript属性访问表达式用法.分享给大家供大家参考.具体分析如下: 属性访问表达式运算得到一个对象属性或一个数组元素的值.js为属性访问定义了2中语法: expression.identifier expression["expression"] 不管使用何种形式属性访问表达式,在.和[之前的表达式钟会首先计算,如果计算结果是null或undefined,则表达式会抛出一个类型错误异常,因为这两个值都不能包含任意属性. 显然.identifier的写法更加简单,

jQuery子属性过滤选择器用法分析

本文实例讲述了jQuery子属性过滤选择器用法.分享给大家供大家参考.具体分析如下: 1. :first-child选择器 用于选择其父级的第一个子元素的所有元素,格式: 复制代码 代码如下: $("selector:first-child") 如: 复制代码 代码如下: $("ul:first-child").css("text-decoration", "underline").css("color",

JQuery中属性过滤选择器用法实例分析

本文实例讲述了JQuery中属性过滤选择器用法.分享给大家供大家参考.具体如下: <!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"> <he

Python面向对象class类属性及子类用法分析

本文实例讲述了Python面向对象class类属性及子类用法.分享给大家供大家参考,具体如下: class类属性 class Foo(object): x=1.5 foo=Foo() print foo.x#通过实例访问类属性 >>>1.5 print Foo.x #通过类访问类属性 >>>1.5 foo.x=1.7 #只改新实例属性,不会改变类属性 print foo.x >>>1.7 print Foo.x >>>1.5 foo.

Vue Prop属性功能与用法实例详解

本文实例讲述了Vue Prop属性功能与用法.分享给大家供大家参考,具体如下: 1 Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: html: <div id="app-1"> <!-- HTML 中是 keb