什么是定位体系？
定位体系分三种：常规流（normal flow）、浮动（float）、绝对定位（absolute positioning）。
1.常规流：从直观上理解正常流指的是元素按照其在HTML 中的位置顺序决定排布的过程，主要的形式是自上而下，一行接一行，每一行从左至右。
2.浮动：相对于常规流来讲，它漂浮在常规流的上方。其可以使元素脱离文档流，按照指定方向发生移动。
3.绝对定位（absolute positioning）：
a.static（常规流）：其为默认，一般的元素的定位都是静态定位。
b.relative（相对位置）：相对定位如其名相对于自身来定位，通过left、right、top、bottom进行定位后，元素会根据原来的位置进行移动，需要注意的是使用position：relative的元素不会脱离文档流，元素本身占据的位置也会保留。
c.absolute（绝对位置）：其定位是布局中比较常用的定位，在使用时其生成的位置是相对于最近的已定位父（祖先）级来定位；position：absolute属性是脱离文档流的，重新定位后元素不会占据原来的位置.
<style>
.relative{
width: 100px;
height: 100px;
position: relative;
border: 2px solid red;
}
.absolute{
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="relative"> </div>
<div class="absolute"></div>
</body>
</html>
d.fixed（固定位置）：生成绝对定位的元素，相对于浏览器窗口进行定位。其它特性同absolute绝对定位。
<style>
.test{
height: 1000px;
width: 50;
border-left: 5px solid red;
}
.test1{
position: fixed;
left: 100px;
height: 88px;
width: 100px;
top: 64px;
border: 2px solid;
}
</style>
</head>
<body>
<div>
<div class="test">常规流</div>
<div class="test1">浮动盒子</div>
</div>
打开页面后可以明显看出其区别，使用浮动后的内容无论怎么滑动滚轮条都会固定在位置上。
原文：https://www.cnblogs.com/youwei716/p/10992402.html