要理解定位，首先要了解文档流是什么。
文件流：指盒子按照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]制作一个弹框效果：
联系客服
