首页 > Web开发 > 详细

CSS定位的三种机制:普通流、绝对定位和浮动

时间:2016-04-19 14:12:01      阅读:290      评论:0      收藏:0      [点我收藏+]
1.普通流:
  • position : static – 元素框正常生成。即上述不对元素进行任何样式设置的默认形态。
  • position : relative (此时设置top, right, bottom, left生效) – 相对于它的原点定位,元素仍保持其未定位前的形状,它原本所占的空间仍保留。

例如:

技术分享
技术分享

定位前:

技术分享

定位后:

技术分享

可以看出,div1相对于之前的位置,距离top偏移了40px,距离left偏移了60px。

注:top:40px指的是距上偏移40px,而不是向上偏移40px。

2.绝对定位:
  • position : absolute – 将该元素从文档流中删除,原来的占位不再存在,并相对于其最近的已定位祖先元素定位(如果不存在已定位的祖先元素,则相对于其根祖先元素定位,即或<</span>canvas>)。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。

例如:

技术分享
技术分享

定位前:

技术分享

定位后:

技术分享

  • position : fixed – 与absolute 大致相同,只是相对于当前视窗定位(即滚动条滑动时当前元素位置不会随之改变)。

注1:绝对定位的元素不在文档流中,因此会覆盖其他元素。

注2:设置当前元素position : absolute时,应将其父元素position : relative。

3.浮动:
  • l float : left 或float : right –- 将元素从原来的占位中删除,向左或向右漂浮,直到碰到包含块的边框,或另一浮动元素的边框为止。不论该元素为块级元素还是内联级元素,定位后该元素将以块级元素的形式显示。

注:只有在position为static或relative,或继承了父元素的static或relative时,浮动才生效。

浮动场景:

  • 浮动框总体宽度超过容器:浮动框块下移,直到有足够的空间

技术分享

  • 各浮动框高度不同:下移的浮动框有可能被“卡住”

技术分享

 

CSS定位的三种机制:普通流、绝对定位和浮动

原文:http://www.cnblogs.com/xinran476460042/p/5407736.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!