整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
position 屬性用來指定一個元素在網頁上的位置，下午主要通過3個維度來講述：基準點、是否脫標與占有位置、是否需要設置邊距，一共有5種定位方式：static、relative、absolute、fixed、sticky。在講定位之前先講幾個概念：正常模式與脫標:
所謂正常模式，也就是正常占有位置，不影響下一個元素的布局，也就是說沒有漂浮起來。常見的有塊級元素與內聯元素：
// html
<body>
<div>I am div1</div>
<div>I am div2</div>
<div>I am div3</div>
</body>
// css
div {
background-color: lightgrey;
width: 100px;
height: 50px;
}
div:nth-child(2) {
background-color: yellow;
width: 100px;
height: 50px;
}
div:last-child {
background-color: red;
width: 100px;
height: 50px;
}// html
<body>
<span>I am span1</span>
<span>I am span2</span>
<span>I am span3</span>
</body>
// css
span {
background-color: lightgrey;
width: 100px;
height: 50px;
}
span:nth-child(2) {
background-color: yellow;
width: 100px;
height: 50px;
}
span:last-child {
background-color: red;
width: 100px;
height: 50px;
}所謂脫標，就是脫離了”標準流“（有的叫”正常流“，英文是”normal flow“），本來該占有的位置就不再占有了，下一個元素會占有它的位置，此時元素會出現重疊現象，通過設置z-index大小來顯示元素重疊順序。
static 是瀏覽器的默認定位方式，如果沒有給元素 style 添加 position，那么就是 static 定位。該定位的特征是： * 基準點：按代碼的順序來決定元素的布局，正常顯示模式，即所謂的”標準流“。 * 邊偏移：通過設置 top right bottom left 無效。 * 脫標：不脫標，正常占有該有的位置，不影響下一個元素布局。 * 使用場景：清除定位，即一個設置了非static定位的box，不要定位了，就使用static清除，在瀏覽器調試過程中非常重要，比如，可通過static查看原有的位置應該在哪。
// html
<body>
<div>test static position</div>
</body>
// css
div {
background-color: pink;
top: 100px;
} relative 相對定位方式，該定位方式的特征是： * 基準點：自己在static定位模式下的位置作為基準點，俗稱元素的默認位置。 * 邊偏移：必須通過設置 top / right / bottom / left 來準確定位。 * 脫標：不脫標，正常占有該有的位置，不影響下一個元素布局，下一個元素仍然以”標準流“看待它。 * 使用場景：一個很常用的口訣”子絕父相“，如果子元素需要設置absolute定位的時候，父元素可設置relative，當然還有其他場景了，這里不一一列舉。
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
// css
.father {
background-color: lightgrey;
width: 300px;
height: 200px;
}
.son {
background-color: yellow;
position: relative;
top: 20px;
width: 200px;
height: 100px;
} absolute 絕對定位方式，該定位方式的特征是： * 基準點：一般是父元素，但是前提是父元素設置了一個非非非static定位，如果父元素沒有設置定位，那么就以瀏覽器窗口作為基點。 * 邊偏移：必須通過設置 top / right / bottom / left 來準確定位。 * 脫標：完全脫標，不占有該有的位置，影響下一個元素布局，下一個元素就當該元素不存在。 * 使用場景：如果一個元素需要以父元素的（0，0）坐標點對齊的時候，可以馬上想到 absolute ，還有需要轉化為inline-block模式也可以使用absolute。
//html
<body>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
</body>
// css
.father {
background-color: lightgrey;
width: 300px;
height: 200px;
}
.son {
background-color: yellow;
position: absolute;
top: 20px;
width: 100px;
height: 100px;
}
.son2 {
background-color: red;
top: 20px;
width: 200px;
height: 150px;
} fixed 固定定位方式，該定位方式的特征是： * 基準點：瀏覽器窗口為基點，不管頁面怎么布局與滾動，該位置就固定不動。 * 邊偏移：必須通過設置 top / right / bottom / left 來準確定位。 * 脫標：完全脫標，不占有該有的位置，影響下一個元素布局，下一個元素就當該元素不存在。 * 使用場景：比如頁面可惡的廣告，你怎么滑動就停在那里不動。
// html
<body>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
</body>
// css
.father {
background-color: lightgrey;
width: 300px;
height: 200px;
}
.son {
background-color: yellow;
position: fixed;
right: 10px;
width: 100px;
height: 100px;
}
.son2 {
background-color: red;
top: 20px;
width: 200px;
height: 150px;
} sticky 粘性定位方式，該定位其實包含了 relative 與 fixed 這兩種定位模式，但不是同時存在，需要一個觸發條件，即邊偏移 top / right / bottom / left 的值達到后就會切換 fixed 方式，不同定位方式，就分別顯示該方式的定位特征。 * 基準點：relative 方式以自身位置為基準點; fixed 方式以瀏覽器窗口為基點。 * 邊偏移：如果設置 top / right / bottom / left 就會同時具備relative 與 fixed 這兩種定位模式，如果沒設置就默認 relative， * 脫標：relative 不脫標，fixed 脫標 * 使用場景：比如頁面可惡的廣告，你怎么滑動就停在那里不動。
// html
<body>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
</body>
// css
.father {
background-color: lightgrey;
position: relative;
left: 200px;
width: 300px;
height: 1000px;
}
.son {
background-color: yellow;
position: sticky;
top: 30px;
width: 90px;
height: 60px;
}
.son2 {
background-color: red;
top: 20px;
width: 200px;
height: 150px;
}
以上就是對各種定位的解釋，在實際工作中也許會很復雜，但基本都是這些定位的巧妙運用，如果講述有什么錯誤，歡迎留言評論，碼子碼圖不易，碼gif圖更不容易，轉載請注明出處，謝謝。
示：點擊上方"藍色字體"↑ 可以訂閱噢！
摘要 51RGB官方微信position是CSS中非常重要的一個屬性，通過position屬性，我們可以讓元素相對于其正常位置，父元素或者瀏覽器窗口進行偏移。postion也是初學者容易搞不清楚狀況的一個屬性，本文將從最基礎的知識講起，談談關于positon屬性的一些理論與應用。
postion屬性我們成為定位，它有4個不同類型的定位，這些類型會影響元素的生成方式，下面我們詳細說明position屬性。
（1）static
static是position屬性的默認值，默認情況下，塊級元素和行內元素按照各自的特性進行顯示
（2）relative
relative翻譯成中文稱相對定位，設置了這個屬性后，元素會根據top，left，bottom，right進行偏移，關鍵點是它原本的空間仍然保留。我們看下面例子：
HTML代碼
1 2 3 | <div class="relative"> </div> <div></div> |
CSS代碼
CSS
1 2 | div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; } |
效果圖
relative效果
在這個例子中，div.relative相對定位，并且left設置為20px，left設置為50px，其相對于父元素進行偏移，并且原本的空間也占據著，下面的元素并不會頂替上去。
（3）absolute
元素設置成absolute后會脫離文檔流，并且不占有原本的空間，后面的元素會頂替上去，而且不論元素是行內元素還是塊級元素，都會生成一個塊級框，也就是例如行內元素span設置了absolute后就可以設置height和width屬性了。看下面例子：
HTML代碼
1 2 3 | <span class="absolute"> </span> <div></div> |
1 2 | div { background: #0094ff; width: 250px; height: 100px; } .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } |
效果圖
absolute效果
如圖所示，span標簽被設置成絕對定位，就可以設置height和width屬性，而且不占有原本的空間，后面的div元素會頂替上去。
（4）fixedfixed的表現方式類似于absolute，但是相比于absolute相對于不確定的父元素進行偏移，fixed就是相對于瀏覽器窗口進行偏移
在詳解CSS float屬性中我們提到包含塊這個概念。對于position屬性也有包含塊這個屬性，它要分幾種情況來討論：
1.根元素的包含塊，根元素一般是html元素，有些瀏覽器會使用body作為根元素，大多數瀏覽器，初始包含塊是一個視窗大小的矩形
2.非根元素的包含塊，如果該元素的position是relative或static，它的包含塊是最近的塊級框，表的單元格或行內塊的內容邊界
我們舉例進行說明，
HTML代碼
1 2 3 4 5 6 | <div> 我是父級元素的內容 <div class="relative"> 相對定位元素 </div> </div> |
包含塊
這是相對定位元素的包含塊，為最近的塊級框，表的單元格或行內塊的內容邊界，相對定位元素相對于其包含塊進行偏移，我們可以簡單理解為相對于其原來的位置進行偏移。
3.非根元素的包含塊，如果該元素的position是absolute，則包含塊為最近的position不是static的祖先元素。簡單來說，它的包含塊會從父級元素一直向上查找，找到第一個position不是static的元素為止。
前面的例子中已經涉及到偏移屬性，它指的是元素相對于其包含塊的偏移，我們稱其為偏移屬性，分別是top，bottom，left，right，依次代表上下左右。他們的值可以是具體的數值，也可以是百分比。如果是百分比，top和bottom是相對于包含塊高度的百分比，left和right是相對于寬度的百分比。它們也可以設置負值，即有可能將元素移動到包含塊的外邊。
接下來我們了解一下絕對定位的詳細細節。
一個元素被設置為絕對定位時，會脫離文檔流，然后相對其包含塊進行偏移。
一般來說，我們會將一個元素設置為relative來作為absolute元素的包含塊，我們看看下面的例子：
HTML代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="absolute"> 相對于初始包含塊定位 </div> <br /> <br /> <br /> <br /> <br /> <br /> <div class="relative"> <div class="absolute"> 相對于最近relative祖先元素定位 </div> </div> |
1 2 3 | div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; } .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } |
效果圖
基本的絕對定位
如圖所示，有兩個絕對定位元素，第一個元素沒有position不是static的祖先元素，所以它的包含塊是body，根據body進行偏移，第二個絕對定位元素設置了一個relative的父元素，它根據父元素進行偏移。
元素設置成絕對定位后會脫離文檔流，并且失去占用的空間，而且如果偏移的位置接近，會造成重疊問題。看看下面的例子：HTML代碼
1 2 3 4 5 6 7 8 | <div class="relative"> <div class="absolute"> 相對于最近relative祖先元素定位1 </div> <div class="absolute light"> 相對于最近relative祖先元素定位2 </div> </div> |
1 2 3 4 | div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; } .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } .light { background: #f3d6d6; top: 70px; left: 80px; } |
效果圖
絕對定位的重疊問題
我們可以看到，第二個絕對定位元素蓋住了第一個元素，那怎么讓第一個元素蓋住第二個元素呢，這就要用到z-index屬性，這個屬性表示元素的疊加順序，默認情況下，z-index為0，數值越高的元素層級越高，就可以蓋住低于其層級的元素，我們設置第一個原色的z-index為10，結果如下
絕對定位的重疊問題
如果兩個元素的層級相同，則越后面的元素會覆蓋前面的元素，默認情況下，第二個元素就會蓋住第一個元素。
fixed定位很簡單，類似與absoulte，但是它的包含塊就是瀏覽器窗口，相對來說簡單很多。常見的應用比如固定導航，回到頂部。在這里不再贅述，大家可以查找相關資料。
relative定位的元素進行偏移后，不會脫離文檔流，還有占據原本的空間。除此之外，我們還要注意一個細節：如果元素設置了margin為負值之后發生重疊的情況下，相對定位的元素會覆蓋普通元素。我們看看下面的例子：HTML代碼
1 2 3 4 5 6 | <div class="no-relative"> 未相對定位的元素 </div> <div class="minus-margin"> 負margin元素 </div> |
1 2 3 4 | div { background: #0094ff; width: 250px; height: 100px; } .no-relative { background: #ff6a00; width: 200px; height: 100px; } .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; } .minus-margin { margin-top: -30px; } |
效果圖
未相對定位時沒有覆蓋
默認情況下，兩個元素都是正常的元素，設置了負的margin屬性后，后面的元素會覆蓋前面的元素，我們修改第一個元素的class為relative，可以看到效果如下：
相對定位時覆蓋
添加了相對定位后，第一個元素就會覆蓋其他正常的元素了。
relative屬性最經常的一個應用應該是作為absolute元素的包含塊了，為了限制absolute元素的偏移位置，常常設置其父元素為relative來作為其包含塊。
position的應用非常頻繁，下面我來說說常見的一些場景：
在電商網站中，我們常常可以看到產品的左上角或右上角有一些比如“新品”，“促銷”，“熱賣”等標簽，比如下圖：
產品標簽
這個是怎么實現的呢，我們來模擬一下：HTML代碼：
1 2 3 4 5 6 | <div class="product"> 我是產品 <span class="hot"> 熱賣 </span> </div> |
CSS代碼：
CSS
1 2 | .product { width: 150px; height: 150px; background: #0094ff; position: relative; } .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; } |
效果如下：
產品標簽
如圖所示，右上角有一個標簽。原理很簡單，就是設置父元素相對定位，標簽元素絕對定位，然后相對于父元素偏移到右上角。
自動完成框是一個非常常見的應用，其生成的下拉菜單也是用到了position屬性。我們先看看下面的效果：
、
自動完成輸入框
這是一個很簡單常見的下來自動完成框，我們來看看它的HTML和CSS代碼：HTML代碼
1 2 3 4 5 6 7 | <input class="search-box" type="text" placeholder="請輸入關鍵字" value="position" /> <ul style="left:58px;"> <li>position屬性</li> <li>position應用</li> <li>position是什么</li> <li>position翻譯</li> </ul> |
1 2 3 4 | .search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; } ul, li { list-style-type: none; } ul { border: 1px solid #ccc; width: 210px; position: absolute; } li { padding: 5px; } |
這個原理也很簡單，通過設置下拉菜單為絕對定位，然后設置其left屬性與輸入框對齊。
當然position的應用還有很多，比如布局，比如fixed可以用來做固定導航菜單，網頁右下角的固定菜單等，有興趣的同學可以自行查找相關資料進行學習。
position屬性是一個容易讓初學者迷惑的屬性，尤其是absolute和relative的應用。要用好它們，首先要從absolute和relative的基本特性開始了解，理解了他們的特性之后應用起來就得心應手了，了解基本原理后，多多寫幾個例子從實踐中去體會它們的特性，慢慢的就會熟悉了。
想認識志同道合的朋友一起學習web
加入我們的學習QQ群 19066743
豐富的學習資源，周一到周四免費直播公開課
長按圖片，識別二維碼即可入群
你可能感興趣的精彩內容
微信：UI設計自學平臺加關注
長按關注：《UI設計自學平臺》
局的核心是position屬性，對元素盒子應用這個屬性，可以相對于它在常規文檔流中的位置重新定位。position屬性有4個值：static、relative、absolute、fixed，默認值為static。
static :默認文檔流，正常顯示；relative:相對定位；absolute：絕對定位；fixed：固定定位。
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<p>1</p>
<p id="p2">2</p>
<p>3</p>
<p>4</p>
</body>
</html>
css：
*{
margin: 0 ;
padding: 0;
}
p{
position: static;
background: #ccc;
margin-bottom: 15px;
}
#p2{
position:relative;
top: 20px;
left: 20px;
}
1 將第二個p元素position屬性設為（絕對定位） relative, 設置top和left值：
圖示：
發現：第二個段落相對于原來的位置向下和右移動了20px。
結論：絕對定位的元素會相對于原來在文檔流中的默認位置進行改變；并且這個元素不會影響其他元素，只是相對于自己原來的位置改變了。
PS:可以給top和left屬性設定負值，把元素向上、向左移動。
2 將第二個p元素position的屬性改為（相對定位）absolute，設置top和left值：
圖示：
發現：第二個段落相對于瀏覽器窗口向下和右，移動了20px。且原來的位置被占據了。
結論：相對定位默認以body為參照物進行定位；并且相對定位已經脫離文檔流， margin-bottom: 15px ；失效。
PS：如果給父元素的position屬性設置了relative，則以父元素為參照物。如果父元素沒有，則看父元素的父元素有沒有，如果都沒則以body為參照物。
3 將第二個段落position的屬性改為（固定定位）fixed，設置top和left值：
發現與絕對定位相似，實際上fixed表示固定在body的某個位置不隨頁面的滾動而改變。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
