相對定位
絕對定位
固定定位
一、相對定位（relative）
1.什麼是相對定位
相對自己以前的在標準流的位置移動
示例格式：
position：relative;
left: 30px
top: 50px;
2.注意點：
2.1不會脫離標準流，會繼續在標準流中占用一定空間；
2.2在設定樣式時，同一方向上（水平或垂直方向）的定位屬性只能使用乙個；
2.3由於相對定位是不脫標的，所以在相對定位中區分塊級元素/行內塊級元素/行內元素；
2.4在給相對定位元素設定margin/padding等屬性時，會影響到標準流的布局（margin屬性作用於定位前在標準流中的盒子，而不是相對定位後的盒子）
3.應用場景：
3.1用於元素的微調；
3.2配合後面學習絕對定位來使用；
二、絕對定位(absolute)
1.絕對定位的元素是脫標的；
2.絕對定位的元素不區分塊級元素/行內塊級/行內元素；
3.絕對定位是相對於body 的定位；
4.絕對定位元素水平居中：
格式：position: absolute;
left:50%;
margin-left: 元素負的寬度的一半；
規律：
1.預設情況下，絕對定位元素無論有沒有祖先元素，它都會以body作為參考點；
2.如果乙個絕對定位的元素有祖先元素，並且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考；即，在祖先盒子中加上屬性，position:
注意點：
2.1只要是這個絕對定位元素的祖先元素都可以；
2.2上面指的定位流是指絕對定位/相對定位/固定定位；
3.如果乙個絕對定位元素的祖先元素中有多個元素都是定位流，那麼這個絕對定位元素會以離他最近的那個定位流的祖先元素作為參考點；
注意點：
1.如果乙個絕對定位元素是以body作為參考點，那麼其實是以網頁眉屏（即螢幕顯示大小）的寬度和高度作為參考點；而不是以整個網頁的寬度和高度作為參考點；
2.乙個絕對定位的元素會忽略祖先元素的padding;
相對/絕對定位的區別比較：
1.相對定位弊端：不脫標，在標準流中占用位置；
2.絕對定位弊端：以首屏為body為基準，隨著滾動，縮放頁面，元素會隨著瀏覽器大小不同變化；
3.兩者結合使用：子絕父相
三、固定定位(position: fixed)
1.固定定位元素是脫標的，不會占用標註流中的空間；
2.固定定位和絕對定位一樣，不會區分行內，塊級，行內塊級，可以直接設定寬高；
3.固定定位不會隨著瀏覽器的下拉而改變位置（應用場景例如網頁中頂部的導航條，邊側的廣告欄，底部的返回圖示）
四、z-index屬性
1.預設情況下所有元素都有乙個預設的z-lndex屬性，取值為0；他的作用是專門用於控制定位流元素的覆蓋關係；
1.1預設情況下，定位流的元素會覆蓋標準流的元素；
1.2預設情況下，定位流的元素後面編寫的會覆蓋前面編寫的（body中）；
1.3如果定位流的元素設定了z-index屬性，那麼誰的z-index屬性比較大，誰就顯示在上面（取值可為1，2，3…）；
注意點：
1.如果兩個元素的父元素都沒有設定z-index元素，那麼誰的index屬性大，誰就顯示在上面；
2.如果兩個元素的父元素設定了z-index屬性，那麼子元素的index屬性聚會失效，也就是說誰的父元素的z-index屬性誰大誰就會顯示在上面；
===筆記內容來自於《從零玩轉html5前端+跨平台開發》
CSS定位學習筆記
僅僅是自己對著w3cschool整理的一些 css 基礎知識點，敲一遍加深下印象也方便以後複習。一切皆為框 與之相反，span 和strong 等元素稱為行內元素，這意味著他們的內容顯示在行內，即 行內框 some text some more text.在這種情況下，這個框稱為無名塊框，因為它不與...
css學習筆記20160126定位
文件流是html可顯示元素在排列時所占用的位置.css實現對元素定位 positioning 有四種不同的定位方式分別是static,relative,absolute,fixed.static是position屬性的預設屬性值,元素在正常的流之中,靜態定位元素不收四個方向的屬性影響.fixed相對...
CSS學習筆記 CSS的定位問題
學習css 布局的時候，對 position 的認識一直不是很清晰，以致於面試的時候回答的不清楚，現在好好的梳理一下這個問題。css 有三種基本的定位機制 1.普通流 2.浮動 3.絕對定位 1.普通流 除非專門指定，否則所有框 div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一...