剛剛學習了定位，一開始還是比較暈的纱新，特別是關于里面的各種相對位置，不知道它們的坐標具體是怎么算的脸爱。所以這里特別的記錄一些影響到定位當中位置的一些東西遇汞。
一、盒模型
在聊位置之前簿废，我們先來看看之前說過的盒模型勺疼。
盒模型
我們從內到外來看看這個盒模型。
- Content edge：它也叫做inner edge捏鱼，它所圍成的區(qū)域代表的是具體的內容，所確定的范圍叫做content box酪耕，也就是盒模型計算方法box-sizing的默認值content-box的范圍导梆。
- Padding edge：它所確定的就是內邊距padding的區(qū)域。
- Border edge：確定border的區(qū)域迂烁。
- Margin edge：確定margin看尼，也就是外邊距的區(qū)域。
二盟步、定位中“位置”的計算
- relative和absolute聯(lián)合使用的情況
在定位當中藏斩，我們經(jīng)常把position: relative；和position: absolute;配合使用却盘，這就相當于建立了一個坐標系狰域，根據(jù)坐標來進行偏移，那么這個坐標系具體長什么樣黄橘，原點又在哪里呢兆览？
這里的坐標系和數(shù)學當中的有一定的差別，它們的X軸方向都是水平向右塞关，但是這里的Y軸方向是垂直向下的抬探。
我們都知道設置了絕對定位的元素，它的位置偏移是相對于最近的設置了定位（static定位除外）的祖先元素（如果沒有滿足的祖先元素帆赢，則相對body進行位置偏移小压。）的左上角，這個左上角到底具體指什么椰于，是margin內邊界或外邊界怠益、border內邊界或外邊界、還是padding內邊界或者外邊界呢廉羔？那我們來看看它的坐標原點到底是在是在哪里溉痢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>定位</title>
<style>
.container{
position: relative;
width: 200px;
height: 200px;
margin: 40px;
padding: 40px;
background: pink;
border: 5px dashed;
}
.box{
position: absolute;
width: 100px;
height: 10px;
margin: 20px;
padding: 20px;
background: yellow;
border: 5px dashed;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
定位的坐標原點
在上面的例子當中僻造，我們把box的坐標設為（0，0）孩饼。通過上面的效果圖可以知道髓削，container和box的border距離為20px，這就是box的margin镀娶。所以可以得出的結論是立膛，在relative和absolute結合使用的情況下，構成坐標原點的是padding edge的左上角梯码，這就是我們經(jīng)常說的相對于祖先元素的左上角的那個角進行的偏移。而我們給絕對定位設置的坐標就是這個元素的margin edge的左上角轩娶。所以如果對定位元素設置了坐標（left、top鳄抒、bottom、right）的話瓤鼻，一般不要設置margin贤重，不然很難進行精確的定位。
- 單一定位的情況
當我們使用單一的定位時祭犯，比較容易理解。它的坐標原點就是margin edge的左上角盹憎，所有的位移都是根據(jù)這個原點進行偏移铐刘。比如說設置為相對定位，它就是根據(jù)自己左上角的margin edge進行偏移檩禾。
三疤祭、包含塊
如果祖先元素能為后代生成包含塊的情況下，構成XY相對坐標系的準確來說其實是包含塊勺馆，不一定是父級元素侨核。我們先來看看包含塊的定義：
CSS包含塊是CSS的視覺可視化模型的一個重要的基本概念搓译，因為每個元素都是相對于其包含塊擺放的锋喜。也就是說，元素的包含塊為元素的尺寸和位置的計算提供了參考段标，是元素的“定位上下文”。
元素的包含塊與它的定位方式相關逼庞，定位方式不同瞻赶，包含塊也不一樣，下面分情況進行說明。
- 根元素
根元素的包含塊叫做初始包含塊吨瞎，初始包含塊是一個視口大小的矩形。在HTML當中字旭，根元素就是html元素崖叫。默認條件下，html元素為包含塊心傀，其中一些瀏覽器也會把body設為包含塊。 - 非定位元素和相對定位元素
對于沒有設置絕對定位（position: absolute）的非根元素养叛，例如：position: static和position: relative宰翅，包含塊設置為最近的塊級元素祖先的內容區(qū)的邊緣，而不是margin和padding邊緣汁讼。 - 絕對定位元素
設置了絕對定位的元素阔墩，它的包含塊是距離它最近的設置了定位的祖先元素（static除外）啸箫。祖先元素可以是塊級元素艰毒，也可以是行內元素，具體來說分為以下幾種情況： - 如果祖先元素為塊級元素柑土，那么包含塊為該元素的內邊距邊界绊汹，也就是padding edge。
- 如果祖先元素為行內元素西乖，那么包含塊為該祖先元素的內容邊界，也就是content edge薄腻。
- 如果沒有上述符合條件的定位祖先元素届案，那么包含塊就是初始包含塊。
- 固定定位元素
對于固定定位元素position: fixed尽纽，它的包含塊就是視口本身童漩。
四、定位當中的一些小知識點
-
position: relative不會改變行內元素的display屬性矫膨，而position: absolute會改變行內元素的display屬性，它將會由inline變成block直奋。所以如果設置了absolute施禾，可以不將元素display改成block。 - 塊級元素在設置了position(relative/static)的情況下width為100%弥搞，但是如果設置了
position: absolute渠旁，width將會變成auto顾腊，它會受到父元素的寬度影響挖胃。 - 元素設置了定位之后，如果沒有設置top酱鸭、bottom、left烁登、right屬性的話蔚舀，定位將不會起作用。
- 上下margin不會在絕對定位的元素上進行邊距合并狼牺。
- 重疊
如果有重疊，就要考慮覆蓋關系是钥。定位（absolute和fixed）讶泰、浮動痪署、普通流的覆蓋位置從下到上依次為： - z-index為負的定位元素兄旬。
- 普通流的非行內元素。
- 浮動元素领铐。
- 普通流的行內元素。
- z-index為auto或0的定位元素瓢姻。
- z-index為正值的定位元素音诈。
感覺定位這一塊還有許多要學習的東西绎狭，以后再來慢慢積累吧褥傍。
