CSS里面position：relative、absolute、static、relative总结

来源：互联网发布：avision扫描仪软件编辑：程序博客网时间：2024/06/05 00:45

1.前言
我们在利用div+css进行布局时，常常被div的位置弄的焦头烂额，很多人甚至放弃了div而直接用table。这里一如既往的推荐使用div布局，其实我们只要掌握了div的position属性和div的float属性，布局是非常灵活的，这里详细说一下div的position，没想象中那么简单，也没想象中那么复杂。

2.position的四种取值
static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定
relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。
absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。
fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持

3.relative,absolute,fixed需要指定具体位置

relative,absolute,fixed如果不指定它的top,left等属性，那么它的position实际上依然是static。使用了relative,absolute,fixed就必须指定具体的位置。

下面是一个例子

<!DOCTYPE HTML><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>CSS POSITION</title>    <style type="text/css">        .wrap{position:relative;height:800px;z-index:1;}        .ps, .pf, .pr, .pa{width:80px;height:80px;line-height:80px;text-align:center;color:#FFF;font-weight:600;font-size:18px;}        .ps{position:static;background-color:silver;}        .pf{position:fixed;background-color:green;top:50%;left:50%;}        .pr{position:relative;background-color:red;top:30px;right:-130px;z-index:10;}        .pa{position:absolute;background-color:orange;top:60px;left:60px;}    </style></head><body>    <div class="wrap">        <div class="ps">static</div>        <div class="pf">fixed</div>        <div class="pr">relative</div>        <div class="pa">absolute</div>    </div></body></html>

0 0