理解绝对定位和相对定位布局网页设计
“xr之神”通过精心收集，向本站投稿了3篇理解绝对定位和相对定位布局网页设计，以下文章小编为您整理后的理解绝对定位和相对定位布局网页设计，供大家阅读。
篇1：理解绝对定位和相对定位布局网页设计
概要：
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系，以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个附件demo。)
说明：
占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。
下面分3种情况分别对相对定位和绝对定位进行讨论：
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况
图1为未定位时的初始效果，
层级关系为：
效果图：
图1
一、用相对定位布局块级元素
元素设置position值： position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）
1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留，物理空间偏移。
图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：
效果图：
图2
2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值
图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。
层级关系为：
效果图：
图3
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。
图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px)
层级关系为：
效果图：
图4
二、用绝对定位布局块级元素
设置position值：position:absolute;
此属性值的设置，元素从文档流完全删除。
1.仅使用left、right、top和bottom属性布局绝对定位元素的情况
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。
注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。
设置元素为绝对定位元素后，元素的Left、Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。
在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已，
层级关系为：
效果图：
图5
以最近的祖先定位元素为参照物的情况
图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：
效果图：
图6
图7中，为改变参照物（橘色框）后的效果
层级关系为：
效果图：
图7
图8中，参照物为最顶级的元素情况。
层级关系为：
效果图：
图8
2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
效果图：
图9
IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
效果图：
图10
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;
层级关系为：
效果图：
图11
b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。
层级关系为：
效果图：
图12
总结：
相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
绝对定位的元素以最近的定位祖先元素为参照物。
本文出自：webteam.tencent.com/?p=328
篇2：如果页面中所有板块使用绝对定位给我们带来的是什么？网页设计
昨天下午坐我旁边的昊哥给我看了个页面，问以后我们的页面可不可以全部使用绝对定位，可能我的叛逆思维，第一反应就是组件灵活度降低，重用性不高，代码量增多，开发成本变多，不建议使用。看了下昊哥提供的页面，基本定下来结构简单，而且使用FLEX开发。
想到目前html的网页几乎全部采用相对定位；而FLASH和flex都是绝对定位（flex也可以相对定位），如果按原理来说，flash天生就是偏向绝对定位，这个和渲染引擎原理有关；html天生是偏向盒模型。因此更加想避掉昊哥的这个想法。
这时叫来了朱标，他提到以前曾经使用这个方法做过尝试。很方便做效果。更确切的说，因为各层之间没有影响，可以做很多事情。从这个角度上考虑的确也有好处。
接着昊哥开会去啦，我决定自己风暴一下。在纸上列出了如果页面中所有板块使用绝对定位给我们带来的好处和麻烦。
好处：
1.JS效果方面开发起来可能变简单
带来的影响：
1.可以没有两列式，三列式等这种布局的概念，
（这里还必须有一个脚本解决每个组件坐标的分配，同时解决当一个组件高度或宽度发生变化，各组件坐标的重新分配。）这个脚本，估计得写个好久因为做到很好的重用，这个脚本要考虑的东西实在是太多啦。
2.需要提供拖拽功能。
加入放到viframe中唯一的解决办法是新加操作按钮才能实现拖拽，否则在主编辑页面上实现拖拽效果会和其他事件发生冲突，没有细想，也许这种冲突有办法解决，但是现在是没有解决方案的。因为不是所有的组件都有固定的结构（既：头+身子）
3.性能问题。这个也是一开始就跟昊哥提出来了。个人认为一定会有性能问题。但是没有真实页面拿来测试，所以这个对性能的影响到底有多大，我也不好说。
不过如果不考虑组件内部任何图片和文字链的编辑问题，我们把一个板块（组件）看成一个对象，实现拖拽，绝对定位的制作页面加上那个觉得需要点时间构思，需要点时间开发的脚本。其实还是很完美的！
来自：www.f-dev.com/387
篇3：IE下绝对定位的元素不能响应鼠标的bug修正网页设计
如果当前绝对定位的元素需要透明（没啥内容、且不设置背景），背景元素有内容透出来的时候，IE6/IE7响应的不是期望的当前元素，而是背景元素，如图：
当鼠标滑到“我爱口碑网”字上，响应的不是期望的黄色框的当前元素，而是响应的灰背景的后面的元素。
BUG表现很简单，解决方法也很简单，就是给当前元素加上假背景图，即透明背景图，这张背景图1×1px，repeat xy，
background:url(transparent.gif);
这儿提供了一个demo来演示bug和修复后的情况：anchor.html
另外也有个不需要图片的解决方案，只能用于当前元素不需要表现的时候，比如有时候只是想放一个链接让用户可以链走
background:white;filter:alpha(opacity=1);opacity:0.01
就是因为用了透明度1%，副作用就是啥都看不到了。
本文来自：ued.koubei.com/2008/09/05/anchor/
【理解绝对定位和相对定位布局网页设计】相关文章：
1.设计定位怎么写
2.定位读后感
3.定位策划书
4.《定位》读书笔记
5.职业定位范文
6.市场定位毕业论文
9.人生定位范文
10.服装品牌定位范文
文档为doc格式
