今天小编跟大家讲解下有关css中定位中的absolute和relative是什么意思 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css中定位中的absolute和relative是什么意思 的相关资料,希望小伙伴们看了有所帮助。
用Div+CSS进行网站布局时 做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值:static、fixed、absolute和relative 后面两个在布局中的定位里是经常用到的 顾名思义 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时 则上述的相对浏览器窗口定位将会变成相对父对象定位 这对精确定位是很有帮助的。来源:爱蒂网