以前一直很模糊定位原理，以为absolute与relative必须配合使用，使用absolute必须父标签必须设置为relative。
可能的值：absolute，fixed，relative，static，static，inherit。
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
最近才弄明白：
1.使用absolute属性的标签的父标签position值必须是absolute/fixed/relative/inherit（不能是继承static）中的一个。
2.left是相对于离自己最近的父辈容器，且已经relative|absolute|fixed。 margin-left也不一定是相对于父容器而言的，应该是作用于它在文档流的位置。比如有浮动效果时float属性时，可能margin-left就不是相对父容器而言了。
3.当父标签是body时，子标签设置position：absolute。position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素（包含块）定位，如果没有这样的祖先元素，则以初始包含块进行定位，而初始包含块并不是以<html>或<body>进行定位的。
可以分别给div加样式的bottom：0px；然后看下效果，body加position:relative样式，html加position:relative样式。结果表示初始包含块并不是以<html>或<body>进行定位的。
<style type="text/css"> html{ border: 1px solid #ff4eb6; background-color: #b8eea5; } body{ width:300px; height: 200px; margin: 10px auto; background-color: #eed2dc; border: 1px solid #0f0407; } div{ width: 100px; height: 100px; background-color: #3ff; position: absolute; bottom:0; }</style>4.绝对定位标签对后面标签的位置影响，无影响，即后面标签的位置，就当绝对定位的标签不存在一样，只是可能会被绝对定位遮挡。
5.相对定位标签对后面标签的位置影响，只与相对标签的width，height，padding，margin的值有影响，与top，left，right，bottom值无关。即后面标签的位置，就当相对定位标签是static定位。不考虑他的top，left，right，bottom值。
6.浮动与绝对定位的区别。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。
7.浮动div对后面标签的位置影响，不影响，只是会覆盖部分后面标签，标签对后面标签里的内容位置有影响，但是对后面标签的左上角坐标无影响。
ps：后面标签指的紧接着 绝对定位/相对定位/浮动标签 的下一个标签，都是只的默认标签，即position:static，并且无浮动。不是默认标签就按相应的规则计算标签位置。如position:relative就按默认位置，然后加上top，left等值移动后的位置。浮动就按浮动的规则。
<body><div style="position: relative; top: 20px;left: 20px;background-color: red;width: 400px;height: 400px;"> <div style="position: absolute;width: 100px;height: 100px;background-color: white;left: 50px;">absolute</div> <div style="width: 200px;height: 200px;background-color: gray;">static</div></div><div style="background-color: #77ab35;width: 400px;height: 400px;"> <div style="position: relative;width: 100px;height: 100px;background-color: white;left: 50px;">relative</div> <div style="width: 200px;height: 200px;background-color: gray;">static</div></div>再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow