在CSS样式中，用的位置属性position，常用的有三种，releative,absolute,fix.
releative 相对定位是相对于原本元素的静态位置，设置left,top,right,bottom进行位置移动，不会脱离文档流。可以通过z-index进行分层级。absolute 绝对定位，相对于最近一个设置了position属性的元素，如果父元素没有设置position属性的，就会依赖于body，进行定位。脱离文档流。可以通过z-index设置元素层级。设置left,top,right,bottom进行位置移动。fix 固定属性，这个依赖于window窗口，跟html，body没有关系。设置left，right，top，bottom属性来移动位置。releative测试实例:
<div class='releative_container'><div class='releative_p'>测试相对定位</div><div class='releative_p move'>测试相对定位</div></div>CSS样式:
.releative_container{background: gray;width: 300px;height: 200px;}.move{position: relative;left: 30px;z-index: 10;}absolute实例,且使用transform属性实现居中显示。
<div class='div_container'><div class='child_div center'></div><div> .div_container{width: 900px;height: 80%;background: #ddd;position: relative;;}.child_div{background-color: blue;width: 70%;height: 70%;position: absolute;}.center{left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 100;}fix 固定窗口
<div class='alert'>我是固定定位</div> .alert{width: 100px;height: 50px;background: blue;position: fixed;right: 100px;bottom: 40px;}学习博客：
https://www.cnblogs.com/wzhiq896/p/5945289.html
http://www.w3school.com.cn/cssref/pr_class_position.asp
https://blog.csdn.net/dong_pt/article/details/51184896