上一篇
下一篇
CSS的相对定位和绝对定位
作者:Hmily 日期:2010-01-24
CSS的相对定位和绝对定位，从CSS手册上来看，理解的不是很透彻。其实CSS的相对定位和绝对定位，还是比较有技巧的。
一、必须搞清两者的意义，表现的形式。
1、相对定位是“相对于”元素在文档流中的初始位置（通俗的讲，这个起点，就是当元素不设置定位时，所在的位置），而绝对定位是“相对于”最近的已定位父元素，如果不存在已定位的父元素，那么是最初的包含块（如HTML标签）。
2、在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。也就是说，所移动的空间，其它元素不能占用。
而绝对定位，文档流无关，完全会脱离原来的位置。运行下列代码以加深理解。
绝对定位：
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
相对定位：
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
二、基于绝对定位的意义所产生的妙用
那就是让父元素相对或绝对定位，加上一句“position:relative;”
子元素绝对定位，可以控制子元素在父元素上，任意移动（悬动）。也许你会说，直接使用相对定位也可以实现，但是绝对定位还有一个特性，是不占据文档流，如下图样式的实现：新字图标悬在菜单上方。要配合z-index使用。
一、必须搞清两者的意义，表现的形式。
1、相对定位是“相对于”元素在文档流中的初始位置（通俗的讲，这个起点，就是当元素不设置定位时，所在的位置），而绝对定位是“相对于”最近的已定位父元素，如果不存在已定位的父元素，那么是最初的包含块（如HTML标签）。
2、在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。也就是说，所移动的空间，其它元素不能占用。
而绝对定位，文档流无关，完全会脱离原来的位置。运行下列代码以加深理解。
绝对定位：
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
相对定位：
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
二、基于绝对定位的意义所产生的妙用
那就是让父元素相对或绝对定位，加上一句“position:relative;”
子元素绝对定位，可以控制子元素在父元素上，任意移动（悬动）。也许你会说，直接使用相对定位也可以实现，但是绝对定位还有一个特性，是不占据文档流，如下图样式的实现：新字图标悬在菜单上方。要配合z-index使用。
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论