相对定位和绝对定位

来源：互联网发布：阿里云免费邮箱 - 百度编辑：程序博客网时间：2024/04/29 09:40

相对定位和绝对定位

1.先说相对定位：跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己呢，也就是说没设相对定位的位置，

那你会问了，设没设都在那个位置为什么要设呢，因为只有设置了才

能使 TOP,LEFT这些生效，也就是设了才能相对自己原来的位置偏移，原来的位置保留着，偏移后会把其它的层遮罩住。

再说绝对定位：在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就不像相对那样是自己了，

至于是哪个，就看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，好像position:inherit;也行，

前面两个可以，后面那个不设什么的不用也行，最好用position:relative;吧,转入正题，当要绝对定位的层设好要参照位置的层后，

就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，

它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置

<html><head><style type="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}</style></head><body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2></body></html>

显示样式:

这是位于正常位置的标题

这个标题相对于其正常位置向左移动

这个标题相对于其正常位置向右移动

2.关于position:absolute relative

(1)position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）

(2)如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地

方，应该给#demo相对定位，#sub绝对定位。

(3)absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，

那么#sub的绝对定位就是相对于body来定位的。

(4)relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},

这时#demo会在相对于它原来的位置上移50px。