在CSS页面布局时，通过position属性定义来设置元素的定位模式。
语法格式：position:static|relative|absolute|fixed;
1、定位的使用方式
定位=定位模式+边偏移
1.1、定位模式
（1）静态定位static：是元素的默认定位方式，各个元素遵循着HTML文档流中默认的位置。
（2）相对定位relative：表示它相对的参照物就是它在static状态下的位置，即以默认的位置为参照物进行位置的移动。
不完全脱离标准文档流，覆盖在其他盒子之上，其他盒子依旧认为它在，保留它的空间。
（3）绝对定位absolute：使用最多的属性之一，表示它相对于其上一个已经定位的父元素进行定位。不设置宽度就没有宽度。完全脱离文档流，不占据位置，其他元素会占据此空间，即对象发生位移时，原先初始位置的内容如同被去除了一样，这个对象独立于其他页面的内容，而初始位置的空白被其他内容自然填补。
注：a、如果没有祖先元素或者祖先元素没有定位，则以浏览器为原点
b、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为原点移动位置(上级元素没有定位上上级有定位的话以上上级元素为原点)
使用口诀：子绝父相，即子级使用绝对定位，父级需要使用相对定位，因为父级需要占用位置，因此是相对定位，子级脱标浮在上面不需要占位置所以是绝对定位
（4）固定定位fixed：元素固定于浏览器中的某个位置，使用场景：浏览器页面滚动时位置不会改变。如某些广告。
特点：a、以浏览器可视窗口为原点移动元素
b、固定定位不占有原先位置
1.2、边位移属性
| top | 顶部偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
1.3、叠放次序z-index
- 当多个元素同时设置定位时，定位元素之间有可能发生重叠
- 要想调整重叠定位元素的堆叠顺序，可以对定位元素使用z-index层叠等级属性，其取值可为正整数、负整数、0.
- 注意：定位元素才有z-index
同级:
（1）不加z-index 后来者居上
（2）加z-index 值越大越在上面 如果值相等 还是后来者居上
嵌套:
（1）不加z-index 默认子元素在上
（2）只给子元素加z-index值<0 可实现父元素为上
（3）如果给父元素也添加z-index 父元素无论怎样 子元素都将在父元素上
嵌套+同层级
（1）如果父元素有其他兄弟元素 如果两者都没加z-index 后来者居上
（2）两者父元素都没加z-index 若某一子元素z-index值大 那么该子元素将显示在上方 如果值相同 则后来者居上
（3）如果父级都加了z-index 那么在进行比较时 只比较父元素z-index值 值越大则父元素连同里面的子元素越靠上 如果值相等 后来者居上
注意：
数字后面不能加单位。
只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性。
flex盒子的子元素也可以设置z-index属性(可以自己了解)
2、元素定位使用讲解
2.1、静态定位（static）
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>静态定位</title>
<link rel="stylesheet" href="../CSS/静态定位.css">
</head>
<body>
<div id="father">
<div class="box1">区块一</div>
<div class="box2">区块二</div>
<div class="box3">区块三</div>
</div>
</body>
</html>CSS代码：
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
background-color: aqua;
border: 1px #666 solid;
padding: 0;
/* static：静态定位，没有定位，默认值，元素按照标准文档流进行显示 */
position: static;
}
.box1 {
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
position: static;
}
.box2 {
background-color: #003580;
border: 1px #0000A8 dashed;
position: static;
}
.box3 {
background-color: #f3f3f3;
border: 1px #395E4F dashed;
position: static;
}效果图：
我们对四个盒子father、box1、box2、box3都设置了静态定位，但效果图与不设置静态定位时的效果图一样。注意：在静态定位状态下，无法通过边位移属性（top、right、bottom和left）来改变元素的位置。
2.2、相对定位
对于HTML代码不变，改变CSS代码，CSS代码如下：
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
background-color: aqua;
border: 1px #666 solid;
padding: 0;
}
.box1 {
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
.box2 {
background-color: #003580;
border: 1px #0000A8 dashed;
/* 设置相对定位 */
position: relative;
left: 1.25rem;
top: 1.25rem;
}
.box3 {
background-color: #f3f3f3;
border: 1px #395E4F dashed;
}效果图如下：
在CSS代码中，我对box2设置了相对定位，并且设置了相应的边位移属性，导致区块二以默认的位置为参照物进行相应的移动，但区块二默认的位置一直存在着，并没有因为本身的移动而消失，因此区块三并没有占据区块二的位置。
2.3、绝对定位
对于HTML代码不变，改变CSS代码，CSS代码如下：
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
background-color: aqua;
border: 1px #666 solid;
padding: 0;
position: relative;
top: 1.25rem;
}
.box1 {
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
.box2 {
background-color: #003580;
border: 1px #0000A8 dashed;
/* 设置绝对定位 */
position: absolute;
top: 1.5625rem;
left: 1.5625rem;
clear: both;
}
.box3 {
background-color: #f3f3f3;
border: 1px #395E4F dashed;
}效果图如下：
在这里，我们按照规范对盒子father设置了相对定位，盒子box2设置了绝对定位，若不对盒子father设置相对定位，则区块二会依据浏览器窗口进行定位。
区块二原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，会被其他内容所占据。box2定位后生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。普通文档流中其它元素的布局就像绝对定位的元素不存在一样。
在这里我们会发现box2设置绝对定位后，其大小和原来相比发生了变化，这是因为box2并未设置宽度和高度，在原来正常文档流中，在不设置宽度、边距的情况下，块元素默认宽度为父级元素的100%，使用绝对定位后，使其完全脱离了原来正常的文档流，盒子宽度默认被内容所撑开，与浮动的效果一样。
2.4、固定定位
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<link rel="stylesheet" href="../CSS/固定定位.css">
</head>
<body>
<div id="father">
<div class="box1">区块一</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="box2">区块二</div>
<div class="box3">区块三</div>
</div>
</body>
</html>CSS代码如下：
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
background-color: aqua;
border: 1px #666 solid;
padding: 0;
}
.box1 {
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
.box2 {
background-color: #003580;
border: 1px #0000A8 dashed;
/* 设置固定定位 */
position: fixed;
top: 1.25rem;
left: 1.25rem;
}
.box3 {
background-color: #f3f3f3;
border: 1px #395E4F dashed;
}效果图如下：
如图所示，随着滚动条的滚动，区块二一直处于浏览器窗口的固定位置，并不会随着滚动条的滚动改变其位置。
3、叠放次序z-index的使用
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>叠放次序z-index</title>
<link rel="stylesheet" href="../CSS/叠放次序z-index.css">
</head>
<body>
<div id="father">
<div class="box1">区块一</div>
<div class="box2">区块二</div>
<div class="box3">区块三</div>
</div>
</body>
</html>CSS代码如下：
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
background-color: aqua;
border: 1px #666 solid;
padding: 0;
position: relative;
top: 1.25rem;
}
.box1 {
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
.box2 {
background-color: #003580;
border: 1px #0000A8 dashed;
/* 设置绝对定位 */
position: absolute;
top: 1.5625rem;
left: 1.5625rem;
}
.box3 {
background-color: #f3f3f3;
border: 1px #395E4F dashed;
/* 设置绝对定位 */
position: absolute;
top: 1.5625rem;
left: 1.25rem;
}效果图如下：
对box2和box3同时使用了绝对定位，导致其发生了重叠，由于box3为“后来者”，所以区块三在最上面。
设置属性叠放次序z-index。
CSS代码如下：
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
background-color: aqua;
border: 1px #666 solid;
padding: 0;
position: relative;
top: 1.25rem;
}
.box1 {
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
.box2 {
background-color: #003580;
border: 1px #0000A8 dashed;
/* 设置绝对定位 */
position: absolute;
top: 1.5625rem;
left: 1.5625rem;
z-index: 1;
}
.box3 {
background-color: #f3f3f3;
border: 1px #395E4F dashed;
/* 设置绝对定位 */
position: absolute;
top: 1.5625rem;
left: 1.25rem;
z-index: 0;
}效果图如下：
对box2和box3设置了z-index属性，box2的值为1，box3的值为0，谁的值大谁在上面，因此区块二在最上面。其他情况类似分析即可。
856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
