如果你想稍微改變布局中一些盒子的位置,或者，如果您想要?jiǎng)?chuàng)建一個(gè)浮動(dòng)在頁(yè)面其他部分頂部的UI元素煎殷，并且/或者始終停留在瀏覽器窗口內(nèi)的相同位置，無(wú)論頁(yè)面滾動(dòng)多少劣摇？定位使這種布局工作成為可能弓乙。
我們可以通過(guò)設(shè)置position屬性的值來(lái)覆蓋默認(rèn)的布局方式（就是可以覆蓋掉基本文檔流行為）
- top屬性
- left屬性
- right屬性
- bottom屬性
定位分類：
靜態(tài)定位
默認(rèn)行為相對(duì)定位
它是占據(jù)在正常的文檔流中，你可以修改它的最終位置勾习，也可以讓它與頁(yè)面上的其他元素重疊懈玻。
position:relative;
代碼絕對(duì)定位
代碼
它不再存在于正常文檔布局流中酪刀，它坐在它自己的層獨(dú)立于一切。
注意：元素的位置已經(jīng)改變骂倘，這是因?yàn)閠op,bottom,left,right以不同方式在絕對(duì)定位历涝。他們指定元素應(yīng)距離每個(gè)包含元素的邊的距離，而不是指定元素應(yīng)該移入的方向堰塌。
這里可能有疑問(wèn)包含元素是什么分衫？
這取決于絕對(duì)定位元素的父元素的position屬性。
如果所有的父元素都沒(méi)有顯式地定義position屬性牵现，那么所有的父元素默認(rèn)情況下position屬性都是static邀桑。結(jié)果，絕對(duì)定位元素會(huì)被包含在初始?jí)K容器中贼急。這個(gè)初始?jí)K容器有著和瀏覽器視口一樣的尺寸，并且<html>元素也被包含在這個(gè)容器里面空闲。簡(jiǎn)單來(lái)說(shuō)走敌，絕對(duì)定位元素會(huì)被放在<html>元素的外面悔常，并且根據(jù)瀏覽器視口來(lái)定位给赞。
總結(jié)：一個(gè)元素加了absolute,那它的父容器設(shè)置為relative;絕對(duì)定位元素可以設(shè)置寬高（類似浮動(dòng)）
問(wèn)題：那么兩個(gè)元素重疊如何決定決定哪個(gè)覆蓋哪個(gè)？
z-index
- 固定定位
固定定位固定元素則是相對(duì)于瀏覽器視口本身残邀。 這意味著您可以創(chuàng)建固定的有用的UI項(xiàng)目柑蛇，如持久導(dǎo)航菜單。
