当前位置:  编程技术>WEB前端

Div CSS absolute与relative的区别小结

    来源: 互联网  发布时间:2014-10-04

    本文导语:  详细讲解两者的关系,需要配合例子,请先看例子: 以下是引用片段:         Div + CSS Example, Wayhome's Blog             position: absolute;   top: 5px;   right: 20px;     position: absolute;  left: 20px;  bottom: 10px;         ...

详细讲解两者的关系,需要配合例子,请先看例子:

以下是引用片段:
 
 
 
 
Div + CSS Example, Wayhome's Blog 
 
 
 
 
 
 position: absolute; 
 top: 5px; 
 right: 20px; 
  
position: absolute; 
left: 20px; 
bottom: 10px; 
 
 
 
 position: absolute; 
 top: 5px; 
 left: 5px; 
 
 
 position: relative; 
 left: 150px; 
  
 width: 300px; height: 50px;  
 
 
   
  

1

 
  

2

 
  

3

 
  

4

 
  

5

 
   
    padding: 20px 0 0 20px; 
  position: absolute;
 
   
    position: relative; 
   left: 200px; 
    
   width: 300px; 
   height: 300px; 
    
    position: absolute; 
    top: 20px; 
    right: 20px;
 
    
    position: absolute; 
  bottom: 20px; 
  left: 20px; 
  
 
   
   
  
 
 
 
 


  absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下:

  1. 没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点,上面例子红色部分(父级黄色区域有 Padding 属性,“坐标原始点”和“内容区域原始点”不一样)。

  2. 有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下:

  (1). 父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、Right、Bottom、Left 属性决定,上面例子绿色部分。

  (2). 父级有 position 属性,父级的“坐标原始点”为原始点,上面例子浅蓝色部分。

  relative:相对定位,CSS 写法“ position: relative; ”,参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,且有“撑开或占据高度”的作用,上面例子橙色部分。

  通过上面的例子和讲解,相信熟练运用 absolute 与 relative 并不是一件很困难的事,我们周围有不少关于 absolute 与 relative 的好例子,比如“网易163免费邮”首页(http://mail.163.com),里面就有大量的运用。

  例子代码在 IE5.5、IE6、FF1.5、Opera9 测试通过。


    
 
 

您可能感兴趣的文章:

  • DIV和CSS排版中制作细线条的方法小结
  • div+CSS网页布局的意义与副作用原因小结第1/2页
  • DIV+CSS作网页容易犯的错误小结
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • 如何动态修改层(<div ....> </div>)的显示与否?
  • java命名空间javax.swing.text.html类html.tag的类成员方法: div定义及介绍
  • 父div高度不能自适应子div高度的解决方案
  • java命名空间javax.management类query的类成员方法: div定义及介绍
  • 难!!!在jsp文件的java代码片段中控制该网页上DIV的属性以达到隐藏或显示某div的目的???
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k1div2luminance定义及介绍
  • jQuery拖动div、移动div与弹出层实例
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k2div2chrominance定义及介绍
  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
  • 在div中使用css让文字底部对齐的方法
  • jQuery拖动div、移动div、弹出层实现原理及示例
  • 基于DIV+ul+li实现的表格(多示例)
  • Jquery在指定DIV加载HTML示例代码
  • HTML 区块元素:<DIV>和 <SPAN>各自的定义与区别详细介绍
  • Jquery在指定DIV加载HTML示例代码 iis7站长之家
  • HTML <div> 标签
  • 巧用jquery解决下拉菜单被Div遮挡的相关问题
  • jquery 实现弹出div位于屏幕正中(图文)
  • 解决 select 挡住div的解决方法
  • div+css如何实现页脚的置底


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3