整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS 定位 (Positioning) 屬性允許你對元素進行定位。
CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。
另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流布局。我們會在后面的章節中明確浮動的含義。
div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。
您可以使用 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設置為 block，可以讓行內元素（比如 <a> 元素）表現得像塊級元素一樣。還可以通過把 display 設置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。
但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：
<div>
some text
<p>Some more text.</p>
</div>在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。
塊級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
在下面的章節，我們會為您詳細講解相對定位、絕對定位和浮動。
通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。
position 屬性值的含義：
static元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。relative元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。absolute元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。fixed元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
定位 h2 元素：
代碼如下：
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>
</html>效果圖如下：
所有主流瀏覽器都支持 position 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
position 屬性規定元素的定位類型。
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
默認值： | static |
繼承性： | no |
版本： | CSS2 |
JavaScript 語法： | object.style.position="absolute" |
值 | 描述 |
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 屬性的值。 |
iv+css是現在比較流行網頁排版技術，其中css的靈活運用是不可缺少的部分。在完成一些復雜的頁面排版都是由最簡單的排版方式演變而來的，應讀者的要求今天給大家講解一下css最基礎的布局元素對齊，在css中我們可以用多種屬性來實現對齊元素，如果你是技術大牛的話這篇文章就可以直接忽略了，不喜勿噴！
css中元素對齊方式有哪些？
1、塊元素的對齊
塊元素默認占一行，如果一行內已經出現了塊元素，再添加其他塊元素會自動換行的。塊元素也可以嵌套其他的塊元素使用，塊元素一般是作為容器出現的，比如說HTML中常出現的div，塊元素和行元素是可以通過css相互轉換的。塊元素可以使用“margin” 屬性來水平對齊，可通過將左和右外邊距設置為 "auto"，來對齊塊元素。比如.nav{margin-left:auto;margin-right:auto;width:70%;}，如果寬度是100%則對齊沒有效果，我們可以把這段代碼改成.nav{margin:0 auto;}來實現導航板塊內容的水平對齊。塊元素存在一個外邊距處理方面的 BUG會在個別瀏覽器出問題，使用的時候一定要注意這個問題。
2、使用 position
對齊元素的方法之一是使用絕對定位，比如說這段代碼：.nav{position:absolute;right:0px;width:300px;}。但是在使用position水平對齊元素時會出現兼容問題，使用IE8之前瀏覽器，如果容器設置了明確寬度，忘記聲明！DOCTYPE左右兩側會增加十七像素的外邊距。為了避免這樣問題使用 position對齊元素，一定不要忘記 !DOCTYPE聲明。
3、使用float
對齊元素的另一種方法是使用 float 屬性，如這段代碼.right{float:right;width:300px;}，這樣對齊元素也會出現瀏覽器兼容，，使用IE8之前瀏覽器，如果使用了使用 float 屬性時，忘記聲明！DOCTYPE左右兩側會增加十七像素的外邊距，這一點和position是一樣的，為了避免這樣問題使用 position對齊元素，也一定不要忘記 !DOCTYPE聲明。
關于“css中的元素對齊”先聊到這。每天學習一個知識點，每日寄語”不管有多少面墻阻擋，總還有一道屬于你的明媚陽光。”如轉載清標明出處。
上一篇文章，介紹了魔鬼屬性——浮動布局。浮動布局比較靈活，但是不容易控制。而定位布局使用戶精準定位頁面中的任意元素成為可能。因此在實際開發中，大家應該靈活使用這兩種布局方式，這樣才可以更好地滿足開發需求。
定位常用于布局，利用定位可以將元素精確擺放在任何位置。定位布局共有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小時內與您取得聯系。
