position:relative/absolute无法冲破的等级（2）
作者：小毅 来源：蓝色经典 发布时间：2007-05-11 17:03:00
上一页讲了定位中的等级，这几天再看的时候发现文中讲得并不透彻，没有直指关键。所以特别的在这里做出补充希望能把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;}
运行代码框
这是指定父级重组了层叠的顺序,如果要是没有办法一一指定父级的顺序重组,那就要看看上一页的内容.但是也不是什么问题都能解决,但是看看也许能帮你想到更好的办法!
0
投稿猜你喜欢
学习目的 掌握如何用ADO.NET插入新的记录 我们学得好快，今天做一个简易的新闻发布网页，可以说是个演示型的，只是让大家能理插入数据的最主- 在MySQL中，一个字符串中，如果某个序列具有特殊的含义，则这个序列以反斜线符号(‘\’)开头，称为转义字符。常见的转义字符：\0 ASCI
- 用户体验已经是一个老生常谈的话题了。我非常赞同某位达人所说的，用户体验设计应该贯穿于产品从萌芽到出生的整个过程，产品原型、视觉设计、前端开发
- 一个网站的一个页面download.asp通过判断referer来确定是不是从他本站点过来的链接，使用这个功能我们可以用来防止下载盗链，当然
- 有些朋友看到这个标题可能会有疑问，难道在视图中使用*符号还有何要注意的地方吗？对于这个问题，我们先不必回答，先看一下例子吧。 我这里，使用的
- 到目前为止，我们连接的都是两张不同的表，那么能不能对一张表进行自我连接呢？答案是肯定的。有没有必要对一张表进行自我连接呢？答案也是肯定的。
- * 对子查询和Join进行了优化,包括对MyISAD和InnoB存储引擎分散范围内的批量索引访问。* 增加了 BACKUP DATABASE
- 提起数据库，第一个想到的公司，一般都会是Oracle。该公司成立于1977年，最初是一家专门开发数据库的公司。Oracle在数据库领域一直处
- 一个简单的JS显示日期代码，可以显示星期几<script type="text/javascript">fu
- 作者：AngelGavin 出处：CSDNInternet Explorer 5.0 对 XML 提供哪个级别的支持？Inter
- 在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。下面我们一起来看看如何获取到
- Debug Textarea这个东西是在线写 js 脚本的时候，用来即时查错的东西！也就是，当发现所编写的脚本有问题的时候会有相应的提示，并
- 一般上电子商务网站买东西的用户分三种：随便看看，就是不买先看看，买不买再说就是来买东西的这样的需求反应到产品页的购买按钮上，我们一般会看到购
- 经常使用到有关数据库的操作。包括连接代码、SQL命令等等，又不曾刻意去记忆它们（我本人是不愿意去记这东东），所以常常在用到的时候又去查书本，
- 不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大
- 很多人对于CSS都是边干边学习，因为它不像C#之类的语言那么复杂，看起来似乎挺简单，然而正是这种对CSS的不完整的理解，导致了许多的CSS代
- 代码如下:url="http://www.cidianwang.com/" wstr=getHTTPPage(
- 老师罚学生抄写英文单词，结果学生给抄成这样……
- google 的设计原则中文1.易用性-聚焦在人，方便他们的生活，工作，梦想。2.速度-分秒必争3.简单-简单而强有力4.关联性- 对初学者
- 今天研究了些取access数据库随机记录问题，这是这我自己搜集整理的方法。大家有没有高见，可以告诉我，或者我总结的东东本身有误，也可以帮我修
