一、简介
定位就是指将元素摆放在页面的任意位置，通过定位可以任意的摆放匀速，通过position可以设置元素的定位
可选值：
- static: 默认值，元素没有开启定位
- relative: 开启元素的相对定位
- absolute: 开启元素的绝对定位
- fixed: 开启元素的固定定位
二、相对定位
1. 如何设置
(1) 设置position属性为relative
(2) 设置偏移量，通过left，right，top，bottom四个属性来设置元素的偏移量
- left: 元素相对其定位位置的左侧偏移量
- right: 元素相对其定位位置的右侧偏移量
- top: 元素相对其定位位置的上边偏移量
- bottom: 元素相对其定位位置的下边偏移量
2. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 200px;
top: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3. 注意
(1) 当开启了相对定位后，不设置偏移量，元素不会发生任何变化
(2) 相对定位是相对于元素在文档流中原来的位置进行定位
(3) 相对定位元素不会有脱离文档流
(4) 相对元素会使元素提高一个层级
(5) 相对定位不会改变元素的性质，块还是块，内联还是内联
(6) 通常只需要两个就可以对一个元素进行定位，使用水平方向或垂直方向的偏移量来对一个元素进行定位
三、绝对定位
1. 如何设置
(1) 设置position属性为absolute
(2) 设置偏移量，通过left，right，top，bottom四个属性来设置元素的偏移量
- left: 元素相对其定位位置的左侧偏移量
- right: 元素相对其定位位置的右侧偏移量
- top: 元素相对其定位位置的上边偏移量
- bottom: 元素相对其定位位置的下边偏移量
2. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3. 注意
(1) 当开启了绝对定位后，不设置偏移量，元素不会发生任何变化
(2) 绝对定位元素会脱离文档流
(3) 绝对定位是相对于元素最近的开启的定位的祖先元素的位置进行定位
(4) 如果所有的祖先元素都没有开启定位，则相对于浏览器的窗口进行定位
(5) 一般情况下开启了元素的绝对定位后都会同时开启父元素的相对定位
(6) 绝对定位会使元素提升一个层级
(7) 绝对定位会改变元素的性质，内联元素会变成快元素，块元素的高度和宽度会被内容撑开
四、固定定位
1. 如何设置
(1) 设置position属性为fixed
(2) 设置偏移量，通过left，right，top，bottom四个属性来设置元素的偏移量
- left: 元素相对其定位位置的左侧偏移量
- right: 元素相对其定位位置的右侧偏移量
- top: 元素相对其定位位置的上边偏移量
- bottom: 元素相对其定位位置的下边偏移量
2. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
/** {
padding: 0;
margin: 0;
}*/
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: fixed;
left: 200px;
top: 200px;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3. 注意
(1) 固定定位是一种绝对定位
(2) 固定定位相对于浏览器窗口进行定位
(3) 固定定位会固定在浏览器的窗口中，不会随滚动条滚动
(4) IE6不支持固定定位
五、层级
通过z-index属性可以设置元素的层级，给z-index指定一个正整数，该值会作为当前元素的层级，层级越高，越优先显示
1. 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2. 注意
(1) 没有开启定位的元素不能使用z-index
(2) 父元素的层级再高，也不会盖住子元素
