本文所分享的知识点是【css中定位中的absolute和relative是什么意思】,欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略,下面是详细的讲解。
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时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。
关于css中定位中的absolute和relative是什么意思的相关讨论如下:
相关问题:css中absolute和relative定位都是相对于什么定位的?
答:拿例子说明最好 #a{width:500px;height:500px;background:#ccc;} #b{width:100px;height:100px;background:#f00;} 首先我们设置#a{position:relative;left:30px;top:50px;} 此时浏览效果为,#a距离浏览器 上边缘50px,左边缘30px 接着我们设置#b{p... >>详细
相关问题:如何使用 absolute and relative css
答:搞清楚相对定位和绝对定位的原理就行了,如何使用就得看要实现什么了。 >>详细
相关问题:CSS层叠样式表relative和absolute的关系
答:具体知识: relative: http://www.w3school.com.cn/css/css_positioning_relative.asp absolute: http://www.w3school.com.cn/css/css_positioning_absolute.asp ABSOLUTE是绝对,定了就不会变了,relative是相对,如果在前面或者或写影响的位置加了... >>详细
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
