当前位置：首页 → 问答吧 → 我受不了了！给新手们发个实在的关于相对定位跟绝对定位的问题！

我受不了了！给新手们发个实在的关于相对定位跟绝对定位的问题！

时间：2009-10-23

来源：互联网

　　在蓝色里看了很多个人人写的关于定位的问题，感觉。。。是在受不了了，自己写了个关于定位的教程供新手们参考。

　　默认定位方式
　　元素默认的定位方式是static 。
　　
　　绝对定位与相对定位的原理
　　绝对定位与相对定位的原理基本相似。元素参照某一容器，根据其top、left等相对于参照容器定位，再根据margin值收缩容器。

　　绝对定位
　　如果不给绝对定位元素的父容器设置绝对或相对定位，绝对定位的元素对窗口边缘产生一个间距，其值等于其top、right、bottom、left值。Left:10px可以理解成距离父容器左边框10px，bottom:10px可以理解成距离父容器底边10px。之后根据绝对定位元素的margin值对其进行扩充或收缩。Margin-left:-10px会使其左边向外扩充10px，Margin-left:10px则会使其左边向内收缩10px，其他的类似。但是，给绝对定位元素的父容器设置绝对或相对定位后，绝对定位的元素的参照点会发生变化，变成父容器。
　　如果不设置绝对定位元素的宽度或高度，为绝对定位元素设置的left、right或top、bottom都有效，一旦设置了宽度或高度，则只有left或top有效。
　　
　　具体如下：
　　1、不给父容器设置相对/绝对定位属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div style="width:100px; height:800px; border:1px solid red; margin:50px auto;"> 　　<div style="position: absolute; top:20px; right:20px; bottom:20px; left:20px; background:#ccc;">1</div> 　　<div style="height:20px; background:#666;width:50px;">2</div> </div>
提示：您可以先修改部分代码再运行

　　2、给父容器设置相对/绝对定位属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div style="width:100px; height:200px; border:1px solid red; margin:50px auto;position: relative;"> 　　<div style="position: absolute; top:30px; right:30px; bottom:30px; left:30px; background:#fff;">1</div> 　　<div style="height:20px; background:#666;width:50px;">2</div> </div>
提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div style="width:100px; height:200px; border:1px solid red; margin:50px auto;position: absolute;"> 　　<div style="position: absolute; top:30px; right:30px; bottom:30px; left:30px; background:#fff;">1</div> 　　<div style="height:20px; background:#666;width:50px;">2</div> </div>
提示：您可以先修改部分代码再运行

　　相对定位
　　相对定位可以这么理解，虚拟出一个div（其大小由相对定位的元素决定），然后将相对元素悬浮在虚拟的div上并根据top、left、right、bottom相对于虚拟出的div偏移，之后根据margin值对虚拟出来的div进行扩充或者收缩并根据扩充、收缩值调整相对定位的元素。
　　相对定位不能象绝对定位那样不设置高、宽而根据top、right、bottom、left来控制其相对父层容器来设置其大小。给相对定位的元素同时设置了left、right或top、bottom时，只有left或top生效。比如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div style="width:100px; height:200px; background:#ccc; margin:50px auto"> 　<div style="position:relative; top:20px; left:20px; height:30px; background:#fff; width:50px;">1</div> 　<div style="height:20px; background:#666;width:50px;">2</div> </div>
提示：您可以先修改部分代码再运行

　　先虚拟一个div（2上面的空白处）其大小跟 1 相同，即30px高。然后再将1悬浮在虚拟的div上并产生顶部20px、左侧20px的偏移（top:20px; left:20px; ）。

　　如果给1加margin，比如：margin-top:20px，则会将虚拟出来的div顶部扩充20px的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div style="width:100px; height:200px; background:#ccc; margin:50px auto"> 　<div style="position:relative; top:20px; left:20px; height:30px; background:#fff; width:50px;margin-top:20px">1</div> 　<div style="height:20px; background:#666;width:50px;">2</div> </div>
提示：您可以先修改部分代码再运行

　　绝对定位跟相对定位的区别
　　1、绝对定位跟相对定位最大的区别是相对定位会在父层容器中产生一个虚拟的div占位区。
　　2、可以通过设置父容器的定位属性来改变绝对定位元素的参照容器，但是不可通过该方法改变相对元素的参照容器。
　　3、可以不设置绝对定位元素的高、宽仅依照top等属性控制绝对定位元素的大小，但是该方法对相对定位无效。相对定位的元素，高度、宽度都是固定的，不可修改。
　　4、绝对定位元素会按margin值来扩充或收缩自身，而相对定位收缩的是虚拟出的div占位区。

　　刚刚看了以为仁兄说：不能用定位来解决布局问题，不知道大家看了上面那些后，有什么想法？

[ 本帖最后由 stubend 于 2009-10-23 20:00 编辑 ]

作者: stubend 发布时间: 2009-10-23

贴代码的时候，没贴文档声明。。
哈哈。。

作者: stubend 发布时间: 2009-10-23

先谢谢,再慢慢看

作者: 泥巴巴发布时间: 2009-10-23

看不懂，能不能浅显的说明

作者: zhitaige 发布时间: 2009-10-24

[如果不设置绝对定位元素的宽度或高度，为绝对定位元素设置的left、right或top、bottom都有效，一旦设置了宽度或高度，则只有left或top有效]
对于这一句,在下觉得描述过少，容易导致误解，或是本身要表达的意思就是会导致误解，在不设置元素的宽度和高度时，设置绝对定位元素的left,right,top,bottom属性时会将元素的上下左右都延展至指定位置，而设置了宽度和高度以后，left和right属性可以理解为有冲突，而top和bottom属性也是，这时就是相应冲突的属性谁的解析优先级高,就择取谁设置的值(文档解析式从上到下，从左到右的，这意味着有冲突的属性，在后边的优先级更高一些)。
而关于不能用定位来解决布局问题，我想意思应该是不要依赖使用定位来解决布局问题，虽然是很方便，可以快速的解决某些紧急情况,但保持良好的文档结构习惯才是重要的
凡事都没有绝对，不然就太没意思了，你喜欢用手机发短信的方式和朋友聊天，他喜欢用打电话的方式聊天，都是和朋友聊天，而且短信和通话都是手机的功能，爱怎么用都是自己的事，自己觉得合理就行

作者: hebin0432 发布时间: 2010-06-30

我看了你写的文章就真受不了了。误人子弟！

作者: HiShop6001 发布时间: 2010-06-30

如果不设置绝对定位元素的宽度或高度，为绝对定位元素设置的left、right或top、bottom都有效，一旦设置了宽度或高度，则只有left或top有效。
这话说的我很震惊啊，你是新手还是经验主义者？

作者: xmlovedoudou 发布时间: 2010-06-30

LZ的代码还应该再规范一点，怎么没有body这些必要的标签，不怕触发怪癖模式么？

下面是以前所回的一个帖子：
position:absolute;是绝对定位的意思（我说废话了），既然是定位，那么肯定需要一个参考点。

absolute默认会以离它最近的祖父级元素且已定义了 position:realtive|absolute|fixed;的元素来作为参考点，它会一直往上找，如果都没有，就会以浏览器工作区域左上角为参考点（注意不是body，也不是html）。

运行下面的代码，尝试给html或者body设置position:relative;，或许就明白了。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> html{border:solid 1em green;margin:100px;} body{width:50%;border:solid 1em red; height:500px; margin:2em auto} #main{position:absolute;width:200px; height:200px; background:#ccc; left:0;top:0;} </style> </head> <body> <div id="main">绿色是html，红色是body。</div> </body> </html>
提示：您可以先修改部分代码再运行

作者: yoom 发布时间: 2010-06-30

木匠的简单明了~ 不错

作者: j7761038 发布时间: 2010-09-17