內(nèi)容：
1. position定位原理
2. css盒子模型
3. 確定元素在頁(yè)面的位置
position定位原理
為了制作更多復(fù)雜的布局叛本，我們需要討論下 position 屬性篓叶。它有一大堆的值烈掠，名字還都特抽象，別提有多難記了缸托。讓我們先一個(gè)個(gè)的過(guò)一遍左敌，不過(guò)你最好還是把這頁(yè)放到書(shū)簽里。
1.static
.static {
position: static;
}
static 是默認(rèn)值俐镐。任意 position: static; 的元素不會(huì)被特殊的定位矫限。一個(gè) static 元素表示它不會(huì)被“positioned”，一個(gè) position 屬性被設(shè)置為其他值的元素表示它會(huì)被“positioned”佩抹。
2.relative
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
relative 表現(xiàn)的和 static 一樣叼风，除非你添加了一些額外的屬性。在一個(gè)相對(duì)定位（position屬性的值為relative）的元素上設(shè)置 top 棍苹、 right 无宿、 bottom 和 left 屬性會(huì)使其偏離其正常位置。其他的元素的位置則不會(huì)受該元素的影響發(fā)生位置改變來(lái)彌補(bǔ)它偏離后剩下的空隙枢里。
3.fixed
一個(gè)固定定位（position屬性的值為fixed）元素會(huì)相對(duì)于視窗來(lái)定位孽鸡，這意味著即便頁(yè)面滾動(dòng)，它還是會(huì)停留在相同的位置栏豺。和 relative 一樣梭灿， top 、 right 冰悠、 bottom 和 left 屬性都可用。
4.absolute
absolute 是最棘手的position值配乱。 absolute 與 fixed 的表現(xiàn)類(lèi)似溉卓，但是它不是相對(duì)于視窗而是相對(duì)于最近的“positioned”祖先元素皮迟。如果絕對(duì)定位（position屬性的值為absolute）的元素沒(méi)有“positioned”祖先元素，那么它是相對(duì)于文檔的 body 元素桑寨，并且它會(huì)隨著頁(yè)面滾動(dòng)而移動(dòng)伏尼。記住一個(gè)“positioned”元素是指 position 值不是 static 的元素。
這里有一個(gè)簡(jiǎn)單的例子：
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
css盒子模型
盒模型(box model)是CSS中的一個(gè)重要概念尉尾，它是元素大小的呈現(xiàn)方式爆阶。需要記住的是："every element in web design is a rectangular box"。如圖：
CSS3中新增了一種盒模型計(jì)算方式：box-sizing熟悉沙咏。盒模型默認(rèn)的值是content-box, 新增的值是padding-box和border-box辨图，幾種盒模型計(jì)算元素寬高的區(qū)別如下：
1.content-box（默認(rèn)）
布局所占寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
2.padding-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
3.border-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
不同盒子模型計(jì)算方式的影響
上述三種設(shè)定方式將會(huì)影響設(shè)定元素寬度和高度的值時(shí)，元素所占頁(yè)面的實(shí)際空間肢藐。例如設(shè)定一個(gè)元素值如下：
<div id="demo" style="position:absolute;
left:518px; right:100px;
width:500px; height:500px;
background:#CC0000; top: 114px;
margin-left: 0px; border:5px solid blue;
padding:20px;">
Demo為了方便就直接用絕對(duì)定位的元素
</div>
因?yàn)楹凶幽Ｐ偷挠?jì)算方式默認(rèn)為content-box故河，所以上述代碼中設(shè)定的width:500px; height:500px;設(shè)定的是content的寬度，元素實(shí)際占用的頁(yè)面空間寬度為：
width = 5 + 20 + 500 + 20 + 5 =550
height = 5 + 20 + 500 + 20 + 5 =550
獲取元素在頁(yè)面的位置
getBoundingClientRect
getBoundingClientRect用于獲取某個(gè)元素相對(duì)于視窗的位置集合吆豹。集合中有top, right, bottom, left等屬性鱼的。
<img src="https://i.loli.net/2017/12/28/5a44af2995596.png" alt="" width="200" height="200" />
getBoundingClientRect訪(fǎng)問(wèn)方式
1. jquery訪(fǎng)問(wèn)
$('#m-price')[0].getBoundingClientRect()
2. 原生訪(fǎng)問(wèn)
document.getElementById('m-price-calculate').getBoundingClientRect()
返回元素：
{
bottom: 553, //元素下邊到視窗上邊的距離;
height: 553, //元素高度，ie9以上支持
left: 840, //元素左邊到視窗左邊的距離;
right: 1190, //元素右邊到視窗左邊的距離;
top: 0, //元素上邊到視窗上邊的距離
width: 350 //元素寬度痘煤，ie9以上支持
}
舉個(gè)例子
頁(yè)面源碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body style="width:2000px; height:1000px;">\
<div id="demo" style="position:absolute;
left:108px; right:100px;
width:500px; height:500px;
background:#CC0000; top: 114px;
margin-left: 0px; border:5px solid blue;
padding:20px;">
Demo為了方便就直接用絕對(duì)定位的元素
</div>
<body>
</html>
<script>
document.getElementById('demo').onclick=function (){
var str = "";
if (document.documentElement.getBoundingClientRect) {
str += "left:"+this.getBoundingClientRect().left + "\n"
+ "top:"+this.getBoundingClientRect().top + "\n"
+ "right:"+this.getBoundingClientRect().right + "\n"
+ "bottom:"+this.getBoundingClientRect().bottom + "\n"
+ "原生js獲取位置是X:" + (parseFloat(this.getBoundingClientRect().left) + parseFloat(document.documentElement.scrollLeft) )+ ";Y:"+ (parseFloat(this.getBoundingClientRect().top)+parseFloat(document.documentElement.scrollTop))+"\n"
+ "scrollLeft:" + document.documentElement.scrollLeft + "scrollTop: " + document.documentElement.scrollTop + "\n";
console.log(str);
console.log( "jquery獲取的位置X:" + $(this).offset().left + " Y:" + $(this).offset().top ) ;
//console.log($(this)[0].getBoundingClientRect());
}
}
</script>
點(diǎn)擊紅色區(qū)域凑阶，控制臺(tái)輸出如下：
left:108
top:114
right:658
bottom:664
原生js獲取位置是X:108;Y:114
scrollLeft:0scrollTop: 0
position.html:25 jquery獲取的位置X:108 Y:114
由上可知：
jquery中
offset().left = (parseFloat(this.getBoundingClientRect().left) + parseFloat(document.documentElement.scrollLeft) ;
offset().left等于元素距離最近的“positioned”祖先元素。如果絕對(duì)定位（position屬性的值為absolute）的元素沒(méi)有“positioned”祖先元素衷快，那么它是相對(duì)于文檔的 body 元素的距離宙橱，
同時(shí)等于頁(yè)面元素距離瀏覽器（亦稱(chēng)為視口viewport）的距離加上滾動(dòng)條滾動(dòng)的距離。
注意offset().left指的是元素盒子距離父元素的距離
例如如下元素生成的信息如下
<div id="demo" style="position:absolute; left:58px;
right:100px; width:500px; height:500px;
background:#CC0000; top: 114px; margin-left:
100px; border:5px solid blue; padding:20px;">
Demo為了方便就直接用絕對(duì)定位的元素
</div>
