让美的事情发生
Ziv 小威
详解 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 官方上面的例子还是比较多。再次就不做详解了。


最后修改于 2013-06-09

Comments powered by Disqus