整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例
定位<h2>元素：
h2
{
position:absolute;
left:100px;
top:150px;
}
屬性定義及使用說明
position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。
| 默認值： | static |
|---|---|
| 繼承： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.position="absolute" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
屬性值
| 值 | 描述 |
|---|---|
| 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 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
ss 中的定位，是布局中常用的一種方法，它可以使html元素脫離文檔流，重新定位。語法如下：
position: static|relative|absolute|fixedposition 有四個值，static（默認靜態定位）、relative（相對定位）、absolute（絕對定位）、fixed（固定定位），通常配合left、top及z-index屬性使用（static除外）。
靜態定位很簡單，html元素默認就是靜態定位，和正常情況下html元素在文檔流中的排版一樣。left、top和z-index屬性對應靜態定位來說不起任何左右，如下圖示例：
圖1
圖1中的模塊1，雖然設置了position:static,但是其表現和沒有設置是一樣的，按照標準文檔流進行排版。
相對定位是html元素相對于它原來在標準文檔流中的位置來定位的。如果不設置top、left的話它和靜態定位一樣，不同之處就是它可以設置top、left和z-index屬性，如下圖示例：
代碼：
圖2
顯示效果：
圖3
圖3中模塊2使用了相對定位，脫離正常的文檔流，相對于原始位置左邊50px，頂部30px，但其在文檔流中的位置依然存在，只是視覺上相對原來的位置有偏移。
相對定位的元素寬度默認和塊級元素一樣，寬度100%；
絕對定位時當父級元素也是定位元素（包括相對定位、絕對定位、固定定位）時，它就相對于父級元素的左上角定位，如果父級元素沒有定位或者是靜態定位，那就相對于瀏覽器窗口左上角定位。如下示例：
代碼：
圖4
顯示效果：
圖5
圖5中模塊3和模塊2-1都設置為絕對定位，模塊3的父級沒有定位，模塊2-1的父級是模塊2（相對定位）。所以模塊3相對于頁面左上角位置定位，模塊2-1相對于模塊2左上角定位。
絕對定位不保留原來的位置，完全是脫離文檔流，且其寬度變成不是100%（類似行內元素），它通常都是和有定位的父級元素一塊使用才有意義。
固定定位，通俗講就是固定到屏幕上，它和絕對定位一樣完全脫離文檔流，不保留原來的空間位置。唯一的區別就是它是始終都是相對于瀏覽器窗口左上角定位，不管其父級元素設置了定位。如下示例：
代碼：
圖6
顯示效果：
圖7
圖7中模塊4的設置為固定定位，它的父級時模塊2（相對定位），可以看出和模塊2-1（絕對定位）的區別，模塊4不是相對于父級的。
再看下面這個示例，當滾動滾動條時模塊4始終定在那塊不動。
圖8
注意看上面圖8中，模塊4顯示在模塊3下面，看下圖模塊3的z-index明明比模塊4的小，為什么會顯示在模塊4上面？
圖9
原因是模塊4的父級模塊（相對定位），它的z-index是100和模塊3相同，又因為模塊3元素在模塊2元素后面，所以模塊3顯示在模塊4上面，如果把模塊2的z-index改成101，如下圖：
圖10
模塊4顯示在模塊3上面了，所以z-index的屬性是同級元素相互進行比較大小。
在網頁布局中，定位在早期使用較多，現在不建議過多使用定位，只有在特殊情況下使用，比如返回頂部按鈕效果，或左側導航欄，菜單欄固定定位，不跟隨頁面滾動等。
本篇主要知識點：
定位 | 行為 | 在文檔流中 |
static | 默認行為；元素按順序堆疊并相互了解 | 是的 |
relative | 相對于其在流中的原始位置定位 | 是的 |
fixed | 相對于瀏覽器窗口定位 | 不在 |
absolute | 相對于最近的非靜態 ( fixed, relative, absolute) 元素定位 | 不在 |
感謝關注，歡迎指正錯誤及補充。
上篇：前端入門——浮動float
上一篇文章，介紹了魔鬼屬性——浮動布局。浮動布局比較靈活，但是不容易控制。而定位布局使用戶精準定位頁面中的任意元素成為可能。因此在實際開發中，大家應該靈活使用這兩種布局方式，這樣才可以更好地滿足開發需求。
定位常用于布局，利用定位可以將元素精確擺放在任何位置。定位布局共有4種方式，分別是：
固定定位（fixed）。
相對定位（relative）。
絕對定位（absolute）。
靜態定位（static）。
static是所有元素的默認值，存在于正常流中，不能使用偏移屬性（top、bottom、left以及right）。通常所說的定位，使用的是另外3個關鍵字。
固定定位不如其他定位類型用得普遍，確是最直觀也是最容易理解的定位方式。給一個元素設置position: fixed就能將元素放在視口的任意位置。這需要搭配四種屬性一起使用：top、right、bottom和left。這些屬性的值決定了固定定位的元素與瀏覽器視口邊緣的距離。
所謂的固定定位，指的是被固定的元素不會隨著滾動條的拖動而改變位置。position:fixed固定定位元素的“包含塊”是根元素，唯一可以限制固定定位元素的就是<html>根元素。可見固定定位是很強悍的一個屬性。固定定位最常用于實現“回頂部特效”。
在CSS中，我們可以使用position:relative來實現相對定位。所謂的相對定位，指的是該元素的位置是相對于它的原始位置計算而來的。
position:relative也是結合top、bottom、left和right這4個屬性一起使用的，其中，先使用position:relative讓元素成為相對定位元素，接著使用top、bottom、left和right這4個屬性來設置元素的相對定位。一般只會用到其中兩個屬性。
注意，在默認情況下，固定定位元素的位置是相對瀏覽器而言的，而相對定位元素的位置是相對于原始位置而言的。
絕對定位（absolute）會脫離正常流，并且會將元素變為塊級元素。元素在被設為絕對定位后，其原先所占的空間會被刪除，并且它會相對于包含塊偏移，它的包含塊就是離它最近的position屬性不為static的祖先元素的內容區域。絕對定位是定位類型里的重量級選手。它經常跟JavaScript配合，用于彈出菜單、工具提示以及消息盒子。
在默認情況下，元素沒有指定position屬性時，這個元素就是靜態定位的。也就是說，元素position屬性的默認值是static。
說完定位布局后不得不提的一個屬性就是層疊順序。瀏覽器將HTML解析為DOM的同時還創建了另一個樹形結構，叫作渲染樹（render tree）。它代表了每個元素的視覺樣式和位置。同時還決定瀏覽器繪制元素的順序。順序很重要，因為如果元素剛好重疊，后繪制的元素就會出現在先繪制的元素前面。定位元素時，這種行為會改變。瀏覽器會先繪制所有非定位的元素，然后繪制定位元素。默認情況下，所有的定位元素會出現在非定位元素前面。但是對相對定位或絕對定位的元素來說，通常無法用改變標記位置的方法解決層疊問題。相對定位依賴于文檔流，絕對定位元素依賴于它的定位祖先節點。這時候需要用z-index屬性來控制它們的層疊行為。
層疊屬性類似于三維的Z軸，以對象為中心，前后移動，語法用z-index表示，后面可取值，值較大的元素將疊加在z-index值較小的元素之上。以下是層疊對象的完整語法。
z-index : auto | number層性z-index后面接的值分別表示如下。
屬性的默認值為auto，如果設置是數字，可正可負。如果為正，最大數的對象將在前面，數值越大，越往前端顯示；如果為負值，將會出現對象之后。
注意：第一，z-index 只在定位元素上生效，不能用它控制靜態元素。第二，給一個定位元素加上z-index可以創建層疊上下文。
一個層疊上下文包含一個元素或者由瀏覽器一起繪制的一組元素。其中一個元素會作為層疊上下文的根，比如給一個定位元素加上z-index的時候，它就變成了一個新的層疊上下文的根。所有后代元素就是這個層疊上下文的一部分。
所有層疊上下文內的元素會按照以下順序，從后到前疊放：
如果發現 z-index 沒有按照預期表現，就在DOM樹里往上找到元素的祖先節點，直到發現層疊上下文的根。然后給它設置 z-idnex，將整個層疊上下文向前或者向后放。還要注意多個層疊上下文嵌套的情況。
如果能夠依靠文檔流，而不是靠明確指定定位的方式實現布局，那么瀏覽器會幫我們處理好很多邊緣情況。記住，定位會將元素拉出文檔流。一般來說，只有在需要將元素疊放到別的元素之前時，才應該用定位。
本文我們向讀者重點介紹了對象的定位、定位的基本語法和層疊順序設。屬性定位由position表示，除了可以用z-index控制層的層疊順序外，還可以用top、right、bottom和left設置對象在父對象的定位。定位與浮動也是網頁設計中比較難掌握的知識點，讀者在了解相關知識后需要多動手練習。更好地在實際應用中進行網頁設計。
為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
