您现在的位置: 中华企业文化网 >> 网站代码 >> 网络制作 >> 正文
文章简介:
    
作者:  文章来源:转发 点击数: 更新时间:2009-9-8 20:54:26
CSS中position的absolute和relative的应用
----
【阅读字号:缩小 放大
收藏到...

CSS中position的absolute和relative的应用 
        之前老弄不明白,只能凭借一点短期内“虐出来的经验”制作需要的效果,后来仔细研究了一下,才知道这个position属性其实是指本体对上级的定位。如果这么理解,就好办了。默认的属性值都是static,静态。就不用多说了。最关键的是relative(相对)以及absolute(绝对)。
        往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。 
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。 

例如:如下A-B的嵌套结构 
<div id="A"> 
    <div id="B"> 
    </div> 
</div> 
        当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。 
        这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等。 
    

浮动层结构大概如下:  <div id="container">   <div id="content">    </div> </div> 

         要实现的是content层的浮动。          刚开始的时候想着通过z-index的值来实现不同的层,position属性都没有特别关注。但是结果怎么也出不来,后来查找资料得知position属性可以理解为是本元素针对父元素的定位。只要把本元素的position属性设置为:absolute,然后把父元素的position属性设置为:relative,那么本元素的left,top属性就是针对父元素的值了,而不是正对document窗口了。

        本例中当container的position为relative时,content的position为absolute才有效。这时候content的left:0;top:0就不再针对document窗口了,而是针对id为container的这个div了。

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