CSS定位问题position属性浅析

时间：2020-02-24 21:43:54  来源：chqqws.com  作者：陈清泉

1、relative：
一般用作为其position属性为absolute的子元素定位参考；还可以配合其它属性做居中操作（本文不展开）等。若只设置relative属性，本元素自身及网页布局无任何变化。但若设置其top，bottom，left，right的值时，我们可以换个思路理解为：该元素此前位置依然被占用，元素本身脱离文档流。

如下图所示：

HTML：
<div class="a">A:relative</div>
<ul>B:不设定位</ul>

CSS：
<style>
*{margin:0;padding:0;}
body{background:gray;}
ul,li{list-style:none;}
div{display:block;height:200px;width:200px;}
.a{background-color:red;position:relative;left:150px;top:100px;}
ul{width:600px;height:300px;background-color:pink;}
</style>

2、absolute：
在同一分支有很多个定位时很容易搞混的一个点，不知道该相对于谁来定位。其实很简单，就一句话：其定位是相对于距离最近且设置过定位的祖先元素，若祖先元素都没有设置定位则相对于body。设置过absolute的元素就脱离文档流了。

如下图所示：
其中爹和儿子一个分支，ABCD一个分支且辈分递减。因儿子的祖辈没有设置定位，所以儿子就被body勾引走了，其定位是相对于body来的。再来看看D，D的爸爸C没加定位不能跟他走，再继续往上走，它的爷爷B有定位那就你了，所以D的定位是相对于B来的。什么还有A？没它爷爷离着近，一边玩去吧。

HTML：
<div class="a">A:relative
    <div class="b">B:absolute
        <div class="c">C:不设定位
            <div class="d">D:absolute</div>
        </div>
    </div>
</div>
<ul>爹:不设定位
    <li>儿子:</br>absolute</li>
</ul>

 CSS：
<style>
*{margin:0;padding:0;}
body{background:gray;}
ul,li{list-style:none;}
div{display:block;height:200px;width:200px;}
.a{background-color:red;position:relative;left:90px;top:100px;}
.b{background-color:yellow;position:absolute;top:50px;left:100px;}
.c{border:1px solid red;margin-top:100px;margin-left:50px;overflow:visible;}
.d{background-color:blue;position:absolute;top:60px;left:140px;}
ul{width:600px;height:300px;background-color:pink;}
li{width:80px;height:80px;background-color:white;position:absolute;top:10px;left:10px;}
</style>
 

3、fixed：
脱离文档流，相对于当前窗口定位，不随页面移动。这个比较简单，就不展开了。

4、z-index：
元素的层叠次序，数值越大越靠上，可以有负值，只对设置过定位的元素有效。同级别的元素才有可比性，若数值一样，顺序靠后的元素靠前。

如下图：

HTML：
<div class="a">A: z-index:-2</div>
<div class="b">B: z-index:6</div>
<div class="c">C: z-index:8</div>
<div class="d">D: z-index:6</div>
 
CSS：
<style>
*{margin:0;padding:0;}
body{background:gray;}
ul,li{list-style:none;}
div{display:block;height:200px;width:200px;}
.a{z-index:-2;background-color:red;position:relative;left:10px;top:10px;}
.b{z-index:6;background-color:yellow;position:absolute;top:50px;left:100px;}
.c{z-index:8;position:absolute;background-color:pink;top:150px;left:200px;}
.d{z-index:6;background-color:blue;position:absolute;top:90px;left:240px;}
</style>