当前位置:首页 > DIV+CSS教程 > 正文

CSS布局浮动(float)和定位(position)属性的区别和如何使用

作者:梦觉时分 来源:百度空间 【 】 浏览: 添加日期:2008-12-25 我要评论(3)     

今天看到有朋友留言问浮动和定位有什么区别,如何使用?今天找了篇文章,讲的比较通俗易懂,供大家参考

postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。

二者之中最大的差别就是位置保留。

人们也就利用这种差异,可以做出CSS代码的滑动门菜单。

hover时取当前元素为保留位置,定义一个relative时,没有hover时使用float清空保留位置。

比较示例中的3个样式表,就可以发现:


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: float position 浮动 绝对定位 相对定位

更多评论(3)..会员评论

宝宝(122.96.*.*) 发表于:2009-09-22 17:03:44
我想加咱们网站的群可以么?我qq252912982
管理员回复:群因为人数过多,有时会加不上,现在群3可以加入的
Guest(58.221.*.*) 发表于:2008-12-26 14:46:16
给了宽度不行,IE窗口放大里面两个层分离的,但当IE窗口缩小,里面两个层又有部分挤在一起了,所以我应该还是没明白到底怎么定位层里面的其他层。就是当窗口变大或缩小,里面的层的都不会随便的移动的。站长如果有这个方面的源码贴下给我看看,万分感谢。
管理员回复:你加到群里,把你的情况说明白,想实现什么的效果,大家会帮助你的
Guest(58.221.*.*) 发表于:2008-12-26 09:45:51
还是没完全看懂,顺带问下,在一个父的DIV里包含两个子浮动的DIV,在不同大小的窗口下,那两个子DIV的位置就会乱,请问这是什么原因。
管理员回复:你把父div定义个宽度试试

出差旅游免费预订酒店

【视频教程】新手常见问题