本文目录
- html中关于position:relative的疑问
- CSS里面position：relative与position：absolute区别
- position属性:relative与absolute的区别
- 谁能帮我解释一下在html里position: relative;是什么意思
- CSS里面position：relative与position：absolute 区别
- div中position:relative的完整用法怎么用
- position:relative;相对定位是否以上一对象的所留空间作为下一对象的原点定位
- css的position:relative
html中关于position:relative的疑问
position:relative; 跟position:absolute; 前面是相对定位 后面这个是绝对定位
一般相对是放在父DIV 绝对是放在子DIV
绝对定位是浮动的一个层 你上面那个把父DIV的position:relative;给删了 那么子DIV的position:absolute; 就会走位
所以你要用到绝对定位 那么父DIV里面必须要有相对定位 这样防止不同分辨率的屏幕使绝对定位层走位
能理解吗？
CSS里面position：relative与position：absolute区别
position：absolute这个是绝对定位；
是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px;这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用topleft在定位。应该用margin。
比如：《divclass=“1“》《/div》《divclass=“2“》《/div》
当1固定了位置。1的样式float:left;width:100px;height:800px;
2的样式为float:left;position：relative；margin-left:20px;width:50px;
2的位置在1的右边，距离120px
position属性:relative与absolute的区别
absolute指绝对位置，就是说设定后该控件是固定在页面的某处，不会因其他控件的大小变化而影响到其分布位置的改变。position指一般位置，就是说设定后该控件在无其他控件的影响下，其位置位于你设定的地方。如果其他控件的大小占用了你设定的位置，那么原先就会让出位置啦。relative指相对位置，就是相对来说的，比如控件与控件之间的相对位置，控件与面页的相对位置，打个比方，控件A和控件B是相对位置，那么当控件A的位置发生改变时，控件B 也跟着改变。 6
谁能帮我解释一下在html里position: relative;是什么意思
position: relative; 相对定位。
相对于其父级元素来定位。
生成相对定位的元素，相对于其正常位置进行定位。
因此，“left:20“ 会向元素的 LEFT 位置添加 20 像素。
absolute 绝对定位 ，通过 top,left 样式来绝定元素位置。
CSS里面position：relative与position：absolute 区别
position：absolute这个是绝对定位；
是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。
比如：《div class=“1“》《/div》《div class=“2“》《/div》
当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边，距离120px
div中position:relative的完整用法怎么用
position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）
如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。
absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。
relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。
static: 默认值。无特殊定位，对象遵循HTML定位规则;
absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义;
fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范;
relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置;
position:relative;相对定位是否以上一对象的所留空间作为下一对象的原点定位
《p》你的问题描述的有些不明白，上一对象的所留空间作为下一对象的原点定位，那么你的意思是用了position:relative;的层是第二层，第一层的所留空间作为第三层的原点定位？涉及父子子三层div吗？《/p》
《p》position:relative;是相对其自身原有位置的定位，比如该div就在左上角，position:relative;就是相对左上角那个位置的定位。《/p》
《p》它的下一层使用了position:absolute；的话，就是相对于上一层进行的绝对定位，比如left：50%，就是相对应上一层用了position:relative;的左边左移50%；《/p》
《p》《/p》
css的position:relative
下面的回答希望你有耐心看完，然后你就会了解relative absolute fixed static这四种属性值的真实意义，注意要动手操作
首先：fixed属性，当使用ostion:fixed时的时候，一般也会使用left、top这两个属性,left是指距离浏览器窗口左边的距离，top是指距离浏览器窗口上面的位置。并且如果网页高度很大右侧有滚动条的时候，他的位置不会随着滚动条的滚动而发生位置的变化，也就是说他的位置是固定的，看下面的例子
《!DOCTYPE HTML》
《head》
《meta charset=“UTF-8“》
《title》CSS POSITION《/title》
《style type=“text/css“》
body{height:1200px;}
.div_fixed{position:fixed ;left:100px;top:100px;width:50px;height:50px;background:#f00;}
《/style》
《/head》
《body》
《div class=“div_fixed“》
《/div》
《/body》
《/html》
然后：absolute
使用position:absolute属性时，一般也会使用left和top这两个属性，但是此处的left和top指的是具距离该元素的参照物的距离，那么这个参照物是什么呢？
想作为使用position:absolut属性元素的参照物需要具备两个条件：
第一个条件：是他的父元素，
第二个条件：父元素使用了position:fixed；position:absolute；position:relative这三个属性中的其中一种，满足了这两个条件之后，那么left和top就以这个父元素做为参照物，那么如果没有满足呢？没有满足的话就会以（0，0)作为参考进行偏移，
你说的设置了 position:absolute属性，但是并没有设置left和top就是为了满足这个条件的
看下面的两个例子
例子一
《!DOCTYPE HTML》
《html lang=“zh-cn“》
《head》
《meta charset=“UTF-8“》
《title》CSS POSITION《/title》
《style type=“text/css“》
body{height:1200px;}
.div_fixed{position:fixed ;left:100px;top:100px;width:50px;height:50px;background:#f00;}
.div_absolute{position:absolute ;left:100px;top:100px;width:50px;height:50px;background:#ff0;}
《/style》
《/head》
《body》
《div class=“div_fixed“》
《/div》
《div class=“div_absolute“》
《/div》
《/body》
《/html》
例子2
《!DOCTYPE HTML》
《html lang=“zh-cn“》
《head》
《meta charset=“UTF-8“》
《title》CSS POSITION《/title》
《style type=“text/css“》
body{height:1200px;}
.div_fixed{position:fixed ;left:100px;top:100px;width:50px;height:50px;background:#f00;}
.div_absolute{position:absolute ;left:100px;top:100px;width:50px;height:50px;background:#ff0;}
《/style》
《/head》
《body》
《div class=“div_fixed“》
《div class=“div_absolute“》
《/div》
《/div》
《/body》
《/html》
然后是是static这个属性，这个是一个默认存在的属性，如果你没有使用
position:fixed；position:absolute；position:relative，那么默认使用的就是static属性，
最后是position:relative属性，
position:relative这个属性也会结合left和top使用，而且他也是有参照的，那么他的参照物是什么？他的参照就是这个元素使用static属性时的位置，看下面的两个例子
假设这个元素没有使用position属性
《!DOCTYPE HTML》
《html lang=“zh-cn“》
《head》
《meta charset=“UTF-8“》
《title》CSS POSITION《/title》
《style type=“text/css“》
body{height:1200px;}
.div_none{width:50px;height:50px;background:#f00;}
《/style》
《/head》
《body》
《div class=“div_none“》
《/div》
《/body》
《/html》
如果使用了relative属性
《!DOCTYPE HTML》
《html lang=“zh-cn“》
《head》
《meta charset=“UTF-8“》
《title》CSS POSITION《/title》
《style type=“text/css“》
body{height:1200px;}
.div_none{position:relative ; left:100px;top:200px;width:50px;height:50px;background:#f00;}
《/style》
《/head》
《body》
《div class=“div_none“》
《/div》
《/body》
《/html》
总结：position:fixed；position:absolute；position:relative 这三个属性相同的是都会结合left和top属性使用，不同的是left和top的参照物不同，掌握了这三种情况下的参照物是什么，也就掌握了这三个属性的使用方法
