整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、相對定位（position：relative）
1、相對定位：將盒子的position屬性設置為relative；可通過left、top、right、bottom設置偏移量。
相對定位基礎用法示例：
我們先在頁面設置兩個div盒子（第一個紅色；第二個藍色）
最初的位置
我們將第一個盒子進行相對定位；離左邊200px；離頂部50px；
得到的效果是；
得出結論：
1、紅色盒子是相對于盒子最初的位置向左偏移200px，向下偏移50px；
2、盒子偏移后也不會影響其他盒子；偏移后最初的位置會留下一個占位的。
二、絕對定位（position：absolute）
absolute用法示例：
1、我們設置一個div盒子box{設置好高度、邊框和離頁面頂部的距離}；里面還裝有兩個小盒子，第一個紅色，第二個藍色；
最初的位置
然后我們讓第一個紅色盒子設置絕對定位屬性{left：100px；top：100px；}
效果圖如下：
結論：1、絕對定位的盒子，最初的位置不會再占用，后面的盒子會填上空缺；
2、在父元素（也就是大盒子box）沒有position屬性時，子元素（紅色盒子）是以屏幕為參照物進行位置的定位的；
從上面所說，我們在大盒子box設置一個position屬性時看看有沒有什么不同的效果:
得到的效果是：
由此可見：如果父元素有position屬性時；他就會以父元素為參照物進行偏移；當然如果父元素沒有position這個屬性，他就會一級一級往上找，
絕對定位相對于的位置偏移是發生在上層元素上是否有position這個屬性，如果沒找到，就相對于整個屏幕。
補充說明：Z-index可以設置層疊的置（絕對定位和相對定位都可以用），越大越在上層。（例如：z-index：1000；）
#首先在HTML添加按鈕
<button>??I Like</button>button {
font-size: 22px;
padding: 20px;
cursor: pointer;
bottom: 50px;
right: 50px;
}body {
position: relative;
}上一篇文章，介紹了魔鬼屬性——浮動布局。浮動布局比較靈活，但是不容易控制。而定位布局使用戶精準定位頁面中的任意元素成為可能。因此在實際開發中，大家應該靈活使用這兩種布局方式，這樣才可以更好地滿足開發需求。
定位常用于布局，利用定位可以將元素精確擺放在任何位置。定位布局共有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小時內與您取得聯系。
