码迷,mamicode.com
首页 > Web开发 > 详细

css position[转

时间:2015-02-01 19:12:47      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:

2.详细展示

2.1 position:absolute

2.2.1 说明:

绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。

2.2.2 视图:

技术分享

2.2 position:relative

2.2.1 说明

相对定位;脱离文档流的布局,但还在文档流的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

2.2.2 视图

技术分享

2.3 position:fixed

2.3.1 说明

固定定位;类似于absolute,但不随着滚动条的移动而改变位置。

2.3.2 视图

技术分享

2.3.3 应用场景

①登录框覆盖层:如dz论坛的登录。

②虚假QQ消息广告。

 

2.4 position:static

2.4.1 说明

无定位,表示此元素为默认定位方式。

2.4.2 应用场景

IE6的特殊处理。

 

3.总结

3.1 滚动条是否出现

当含有position属性的元素为最边缘元素时:

①absolute 和 relative :含有此2个值的边缘元素,浏览器缩小到此元素不可见时,会出现滚动条。

②fixed :含有此值的边缘元素,浏览器缩小到此元素不可见时,不会出现滚动条。

 

3.2 示例

3.2.1 视图

技术分享

 

http://www.cnblogs.com/polk6/p/3214847.html

css position[转

标签:

原文地址:http://www.cnblogs.com/wincai/p/4265868.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!