简析CSS中position属性值的区别

来源：互联网发布：js判断元素是否隐藏编辑：程序博客网时间：2024/05/17 00:01

position规定元素的定位类型，可以设置的值有：static,relative,absolute,fixed,inherit。

我们写5个方块，来显示各个值的区别。
代码：

<style type="text/css">    *{margin:0;padding: 0;color: #fff}    .test1{        position: relative;        width: 200px;        height: 200px;        background: #112232;        color: #fff;        top: 0;        left: 0;    }    .test2{        /*position: static;*/        width: 100px;        height: 100px;        background: #778898;    }    .test3{        position:absolute;        width: 200px;        height: 200px;        background: #556676;        top:0px;        left:200px;    }    .test4{        position:absolute;        width: 200px;        height: 200px;        background:#223343;        top:0px;        left:400px;    }    .test5{        position:fixed;        width: 50px;        height: 50px;        background:#998878;        top:40px;        left:40px;    }</style>

<body>    <div class='test1'>test1        <div class='test2'>test2            <div class='test3'>test3</div>            <div class='test4'>test4</div>              <div class='test5'>test5</div>        </div>    </div></body>

效果如图：

我们可以由此知道：

test3和test4方块的position:absolute是生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。是会脱离文档流的。所以上图的两个position：absolute的方块都是相对于test1方块来设置top和left值来定位的。
- 那么如果test4为test3的子元素，定位是怎么样的呢？
  代码：

    <div class='test1'>test1        <div class='test2'>test2            <div class='test3'>test3                <div class='test4'>test4</div>            </div>              <div class='test5'>test5</div>        </div>    </div>

    如图：

这时，test4是相对test3定位的，不像之前作为相邻元素相互依靠了。即如果它的父级元素和爷爷级元素都是非position:static 属性，则它会选择距离最近的父元素。

position:relative则是相对定位的元素，相对于其正常位置进行定位。它是不会脱离文档流的。我们设置top：0和left:0，所以test1方块位置没有变化，在原来的位置。
position:fixed则是生成绝对定位的元素，相对于浏览器窗口进行定位。会脱离文档流。当拉动浏览器的滚动条时，别的元素在发生位移变化的时候，test5方块依旧是相对浏览器进行定位的。
如图：

阅读全文

0 0