繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > relative absolute无法冲破的等级问题解决
- CSS样式表
- CSS样式表规划与管理的经验总结
- 3个效果超酷的FORM表单美化效果 打包下载
- 创建IE各版本专属CSS IE中的if语句
- 不错的10个你未必知道的CSS技巧
- 一点小小的创意css鼠标放上去则显示电话号码
- 淘宝段正淳的css笔记大全
- CSS实现的一个图片放大展示的一种思路
- 又一实用的常用CSS缩写语法收集
- 对于IE7、FF、OP清除浮动的最优方法
- 多浏览器下IE6 IE7 firefox li 间距问题
- input文本框样式代码实例
- div+css实现自适应宽度按钮
- h1标签的使用技巧
- 用margin和overflow属性实现div间距的方法
- 非常漂亮的css星级效果总结
- 使用CSS解决文字环绕图片问题的代码
- css利用A标签的背景可能作出很有意思的效果
- 写CSS_关于Border你可能需要注意的地方
- 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
- 页面布局黄金比例[图片]
CSS样式表 中的 relative absolute无法冲破的等级问题解决
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 148 ::
收藏到网摘: n/a
如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。 前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题：
复制代码 代码如下:
我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性，然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果，我们会发现，所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢，其实以CSS想强行突破是不太可能，所以我们反过来想，能不能让这个没有被触发的父级标签没有position:relative;属性，而只是触发的时候才有级这个父级赋上这样的值？其实想到这里基本上已经可以解决所有的问题了：
我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性，然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果，我们会发现，所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢，其实以CSS想强行突破是不太可能，所以我们反过来想，能不能让这个没有被触发的父级标签没有position:relative;属性，而只是触发的时候才有级这个父级赋上这样的值？其实想到这里基本上已经可以解决所有的问题了：
复制代码 代码如下:
补充：
前些时间发表的《position:relative/absolute无法冲破的等级》一文，讲了定位中的等级，这几天再看的时候发现文中讲得并不透彻，没有直指关键。所以特别的在这里做出补充希望能把position中的等级讲得更为清楚、明确一些。
我们都知道，position有四个不同的值，分别为：static | absolute | fixed | relative。在苏昱的《CSS2中文手册》中是这样解释的：static:无特殊定位，对象遵循HTML定位规则； absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框； relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置； fixed:IE5.5及NS6尚不支持此属性。
但是要想改变对象的层叠位置需要的是另一个CSS属性：z-index。但是这个z-index并非是无所不能的，他受到了HTML代码等级的制约。z-index只能在同等级的HTML上体现他的作用。这里需要声明的是z-index只有在对象的position值为relative/absolute时才可以使用。下面我们就举些例子来解释等级的特性：
<div id="box_1">
<div id="a">这是第一个块</div>
<div id="b">这是第二个块</div>
</div>
针对上面的这个HTML代码我们还需要写一段CSS来定义它：
#a,#b {position:absolute; width:300px; height:100px; }
#a {z-index:10; left:0; top:0; background:#000; }
#b {z-index:1; left:20px; top:20px; background:#c00; }
这是最普通的在这种情况下#a与#b的层叠等级是可以通过z-index来设定的。这是没问的，那么什么样的情况下就会出现问题呢？我们再看一个实例：
<div id="box_1">
<div id="a">这是第一个块</div>
</div>
<div id="box_2">
<div id="b">这是第二个块</div>
</div>
根据这个结构再写一个CSS,要注意这个CSS中的不同的地方:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; z-index:100; }
#b {background:#0c0; z-index:1; left:50px;}
这时候我们看,不论#a设为多大的值,他都无法超过#b,所以说z-index是无法冲破HTML的等级的,他必需是要同等级的状态下才可以发挥威力.那么如何解决这个问题呢?我可以反过来想,堂兄弟之间的顺序不能被重组,何不把父辈的等级做一次重组呢?所以我们把#box_1的CSS中加入一个z-index:100; 在#box_2的CSS中加入z-index:1;这样再看一下效果:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#box_1 {z-index:100;}
#box_2 {z-index:1;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; }
#b {background:#0c0; left:50px;}
补充：
前些时间发表的《position:relative/absolute无法冲破的等级》一文，讲了定位中的等级，这几天再看的时候发现文中讲得并不透彻，没有直指关键。所以特别的在这里做出补充希望能把position中的等级讲得更为清楚、明确一些。
我们都知道，position有四个不同的值，分别为：static | absolute | fixed | relative。在苏昱的《CSS2中文手册》中是这样解释的：static:无特殊定位，对象遵循HTML定位规则； absolute:将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框； relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置； fixed:IE5.5及NS6尚不支持此属性。
但是要想改变对象的层叠位置需要的是另一个CSS属性：z-index。但是这个z-index并非是无所不能的，他受到了HTML代码等级的制约。z-index只能在同等级的HTML上体现他的作用。这里需要声明的是z-index只有在对象的position值为relative/absolute时才可以使用。下面我们就举些例子来解释等级的特性：
复制代码 代码如下:
<div id="box_1">
<div id="a">这是第一个块</div>
<div id="b">这是第二个块</div>
</div>
针对上面的这个HTML代码我们还需要写一段CSS来定义它：
复制代码 代码如下:
#a,#b {position:absolute; width:300px; height:100px; }
#a {z-index:10; left:0; top:0; background:#000; }
#b {z-index:1; left:20px; top:20px; background:#c00; }
这是最普通的在这种情况下#a与#b的层叠等级是可以通过z-index来设定的。这是没问的，那么什么样的情况下就会出现问题呢？我们再看一个实例：
复制代码 代码如下:
<div id="box_1">
<div id="a">这是第一个块</div>
</div>
<div id="box_2">
<div id="b">这是第二个块</div>
</div>
根据这个结构再写一个CSS,要注意这个CSS中的不同的地方:
复制代码 代码如下:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; z-index:100; }
#b {background:#0c0; z-index:1; left:50px;}
复制代码 代码如下:
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#box_1 {z-index:100;}
#box_2 {z-index:1;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; }
#b {background:#0c0; left:50px;}
评论 (0) All
