CSS position 屬性 絕對定位與相對定位，以及浮動
以前一直很模糊定位原理，以為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