您现在的位置: 中华企业文化网 >> 网站代码 >> 网络制作 >> 正文
文章简介:
    
作者:  文章来源:转发 点击数: 更新时间:2009-9-8 21:22:05
position:relative/absolute的等级解决
----
【阅读字号:缩小 放大
收藏到...

        我们都知道,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时才可以使用。下面我们就举些例子来解释等级的特性:

  1. <div id="box_1">
  2.   <div id="a">这是第一个块</div>
  3.   <div id="b">这是第二个块</div>
  4. </div>

针对上面的这个HTML代码我们还需要写一段CSS来定义它:

  1. #a,#b {position:absolute; width:300px; height:100px;  }
  2. #a {z-index:10; left:0; top:0;  background:#000; }
  3. #b {z-index:1; left:20px; top:20px; background:#c00; }

这是最普通的在这种情况下#a与#b的层叠等级是可以通过z-index来设定的。这是没问的,那么什么样的情况下就会出现问题呢?我们再看一个实例:

  1. <div id="box_1">
  2.   <div id="a">这是第一个块</div>
  3. </div>
  4. <div id="box_2">
  5.   <div id="b">这是第二个块</div>
  6. </div>

根据这个结构再写一个CSS,要注意这个CSS中的不同的地方:

  1. #box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
  2. #a, #b {position:absolute; width:100px; height:300px; }
  3. #a {background:#c00;  z-index:100; }
  4. #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;这样再看一下效果:

  1. #box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
  2. #box_1 {z-index:100;}
  3. #box_2 {z-index:1;}
  4. #a, #b {position:absolute; width:100px; height:300px; }
  5. #a {background:#c00; }
  6. #b {background:#0c0; left:50px;}

这是指定父级重组了层叠的顺序,如果要是没有办法一一指定父级的顺序重组,那就要看看上一篇的《position:relative/absolute无法冲破的等级》.但是也不是什么问题都能解决,但是看看也许能帮你想到更好的办法!

(中华企业文化网)
网站代码及生活常识最新文章
网站代码及生活常识热门文章
网站代码及生活常识推荐文章
相关文章
去掉{ $ ArticleAction }标签中的…
CSS定位中Position的absolute及R…
CSS中position的absolute和relat…
动易SiteWeaver6.8 SQL版数据库安…
  • 前一段代码:
  • 后一段代码:
  • 文章录入:xisheng  责任编辑:xisheng
    热点搜索: 企业文化 愿景 使命 价值观 精神 作风 理念 企业文化咨询
    文章 下载 图片
    天一恒业企业文化咨询经典案例
    天一恒业企业文化咨询 企业文化.net 联系天一恒业 专业精深的企业文化咨询 流量最大文章资料最多的专业企业文化网站 Enterprise culture 企业文化.cn 企业文化.com 天一恒业.cn
    天一恒业专业企业文化咨询 企业文化咨询经典案例 天一咨询新闻动态 天一恒业核心文化理念及咨询观点 天一恒业咨询工具与方法 企业文化培训
    天一使命:为中国企业卓越竭己之志
    天一追求:专的高度 一的品质
    天一愿景:引领行业,事业共享
    联系我们 | 公司简介 | 加盟我们 | 企业文化 |企业文化咨询.中国 | 企业文化.net | 企业文化.中国 | 企业文化.cn | 企业文化.com | 天一恒业.中国
    北京天一恒业企业文化咨询有限公司 企业文化推广网 地址:北京市朝阳区洛克时代中心A座8A层 信箱:wsywfh@163.com 电话:010-64983591