用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值:static、fixed、absolute和relative,

overflow:hidden;的设置会影响z-index失效

后面两个在布局中的定位里是经常用到的,顾名思义,

absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

但是,怎么个绝对法,又怎么个相对法呢?

以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:

1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。

在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

最新文章

  1. Oracle在线重定义DBMS_REDEFINITION 普通表—>分区表
  2. 无法启动调试。未安装Silverlight Developer运行时。最新运行时可以从以下地址下载: http://go.microsoft.com/fwlink/?LinkId=146060.
  3. 备忘zookeeper(单机+伪集群+集群)
  4. 根据指定Word模板生成Word文件
  5. Unity 内置着色器(转)
  6. [转]MAC下JDK版本的切换
  7. Jquery Datatables(三)
  8. .net抓取网页数据
  9. DevExpress VCL 2014.1.2 for C++BUILDER XE6
  10. ECharts一个强大的商业产品图表库
  11. python 列表去重(数组)的几种方法(转)
  12. DOM 节点
  13. 使用 Java8 Optional 的正确姿势(转)
  14. HDU 3565 Bi-peak Number(数位DP)题解
  15. import、export 和export default區別
  16. 【题解】 bzoj3555: [Ctsc2014]企鹅QQ (字符串Hash)
  17. PL/SQL学习笔记之集合
  18. 慕学在线网0.4_xadmin后台管理
  19. Azure DevKit(AZ3166)源码找不到头文件问题
  20. FireDAC中的SQLite(一)

热门文章

  1. react import改为绝对路径
  2. Eclipse调试部分手机不显示日志问题解决
  3. Servlet注解
  4. ubuntu环境初始化
  5. 求割点模板(可求出割点数目及每个割点分割几个区域)POJ1966(Cable TV Network)
  6. java拾遗5----Java操作Mongo入门
  7. 关于JAVA中String类型的最大长度
  8. 取得当前页面的value值问题
  9. Linux学习拾遗
  10. python问号堂--第二篇