要理解定位，首先要了解文档流是什么。
文件流：指盒子按照html标签编写的顺序，从上到下，从左到右排列，块元素占一行，从左到右排列，每一行元素在一行中从左到右排列，先写的先，后写的排在后面，每个盒子都占据自己的位置。
位置可以使方框脱离文档流，就好比将元素分割成几层，没有位置的在一层，定位在没有定位的上面一层。
你可以用Z-index设置等级，Z-index越大，显示的就越向前。在创建网页弹框时，通常将其设置为最大。
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素的定位</title>
<style>
.con1,.con2,.con3,.con4,.con5{
border: 1px solid #000;
margin: 10px;
height: 400px;
}
/* 这个div属于它下属div的父元素，如果没有设置浮动，当下属div设置absolute时，相对于body偏移*/
.con3{
position: relative;
}
.no_pos_1,.no_pos_2{
height: 100px;
width: 400px;
margin :10px;
font-size: 16px;
}
.no_pos_1{
background-color: red;
}
.no_pos_2{
background-color: gold;
}
.relative_1,.relative_2{
height: 100px;
width: 400px;
margin-top :10px;
font-size: 16px;
}
.relative_1{
background-color: red;
position: relative;
left: 50px;
top: 50px;
}
.relative_2{
background-color: gold;
}
.absolute_1,.absolute_2{
height: 100px;
width: 400px;
margin-top :10px;
font-size: 16px;
}
.absolute_1{
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.absolute_2{
background-color: gold;
}
.fixed_1,.fixed_2{
height: 100px;
width: 400px;
margin-top :10px;
font-size: 16px;
}
.fixed_1{
background-color: red;
position: fixed;
left: 50%;
margin-left: -200px; /* 设置水平垂直居中*/
top: 50%;
margin-top: -50px;
z-index: 9999; /* 弹框一般设置足够大的值 */
}
/* 弹框效果 */
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6; /* 设置透明度 */
z-index: 9998; /* 一般比弹框设置的值小1*/
}
.fixed_2{
background-color: gold;
}
.static_1{
height: 100px;
width: 400px;
margin-top :10px;
background-color: gold;
position: static;
}
</style>
</head>
<body>
<div class="mask">
</div>
<div class="con1">
<div class="no_pos_1">
没有使用定位
</div>
<div class="no_pos_2">
没有使用定位
</div>
</div>
<div class="con2">
<div class="relative_1">
relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移
</div>
<div class="relative_2">
</div>
</div>
<div class="con3">
<div class="absolute_1">
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
</div>
<div class="absolute_2">
</div>
</div>
<div class="con4">
<div class="fixed_1">
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
</div>
<div class="fixed_2">
</div>
</div>
<div class="con5">
<div class="static_1">
static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
</div>
</div>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143复制代码类型：[html]制作一个弹框效果：