详解CSS样式的position属性
平时在写css样式的时候position是我们比较常用的一个属性。有时候会弄不清其几个属性值的真正区别。不过用的时间久了,也就慢慢的明白了。不过其实想用好position有时候还是需要些技巧的。写篇博文总结下自己。
- position的作用:用于设置对html元素的定位方式
- position属性的值:
值名称 | 描述 |
static | position的默认值,设置此属性时,元素按照正常的流式布局往下排列 |
inherit | 继承父元素的position值 |
relative | 相对于其他元素的定位 |
absolute | 相对于采用static定位的父元素的绝对定位 |
fixed | 相对于浏览器的绝对定位 |
备注:如果给元素才用了top,left等定位属性时,只有relative,absolute,fixed才会有效果。
3.应用实例
这里主要记录是absolute和fixed属性值。absolute与fixed的好处主要就是它的定位不拘束于其它同级元素,不想其它几种布局自己的定位会被其它元素所影响。所以像做一些动画效果,div浮动效果的时候,这个两个属性值就尤为适合了。
结合z-index的使用
z-index 用于控制元素在页面中层级的位置,就跟高楼大厦的楼层一样,z-index则可用于控制所在的楼层。absolute与fixed都支持z-index属性。所以当几个元素采用absolute或者fixed属性时,为了达到层次显示的效果,z-index属性就很方便了。
示例:
<html> <title>Position</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #container{ height:1000px; width: 960px; margin: auto; background-color: blue; } #roll-top { padding:20px; background-color:#525252; cursor: pointer; right:10px; } #roll-top,#below{ position:fixed; top:85%; font-size:12px; color:#FFFFFF; } #below{ width:100%; height:100px; background-color:#757575; z-index: -1; } </style> <script type="text/javascript"> function rollbackTop(){ window.scrollTo(0); } </script> </head> <body> <div id="container"> </div> <div id="roll-top" onclick="rollbackTop()">返回顶部</div> <div id="below">我在下面</div> </body> <script></script> </html>
像利用absolute做动画效果的例子在JQuery官方上面的例子还是比较多。再次就不做详解了。
作者:Ziv小威
出处:http://imziv.com/
关于作者:专注于Java技术的程序员一枚,此外对JS开发保持着较高的兴趣。爱好音乐,阅读,FM等等。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
如有问题,可以邮件:wewoor@foxmail.com
微博:Ziv小威