整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
用CSS有普通流、絕對定位和浮動三種基本的定位機制，如果不是專門指定區(qū)塊的位置都是在普通流中定位，即從上到下一個接一個地排列，位置
由元素在HTML中的位置決定。
文檔中默認都是靜態(tài)定位
使用相對定位的盒子的位置常以標準流的排版方式為基礎, 然后使盒子相對于它在原本的標準位置偏移指定的距離。
相對定位的盒子仍在標準流中, 它后面的盒子仍以標準流方式對待它。
使用relative, 即相對定位, 除了將position屬性設置為relative之外, 還需要指定一定的偏移量，
水平方向通過left或者right屬性來指定, 垂直方向通過top和bottom來指定。
使用相對定位的盒子，會相對于它原本的位置，通過偏移指定的距離，到達新的位置。而該相對定位的盒子則仍然位于標準流中，它對父塊沒有任何影響。
使用相對定位的盒子不僅對父塊沒有任何影響，對兄弟盒子也沒有任何影響。
簡單理解：
它是相對于"原來的自己"進行定位, 相對定位元素它還占用空間, 它的層次會比普通元素要高
相對定位屬性它一般都是用于配合絕對定位來使用
相對定位有坑, 所以一般不用于做"壓蓋"效果。頁面中, 效果極小。就兩個作用：
1) 微調(diào)元素
2) 做絕對定位的參考，子絕父相(配合絕對定位一起使用)
相關屬性
可以用left、right來描述盒子右、左的移動；
可以用top、bottom來描述盒子的下、上的移動。
用絕對定位的盒子以它的"最近"的一個"已經(jīng)定位"的"祖先元素"為基準進行偏移。如果沒有已經(jīng)定位的祖先元素，那么會以瀏覽器窗口為基準進行定位。
再有，絕對定位的框從標準流中脫離，這意味著它們對其后的兄弟盒子的定位沒有任何影響，其他的盒子就好像這個盒子不存在一樣。
簡單理解:
絕對定位元素它是相對于"祖先"定位元素(relative、fixed、absolute)，如果絕對定位元素它的祖先沒有定位元素(static)那么它會以當前的瀏覽器窗口來進行定位,
絕對定位元素不再占用空間
當position的屬性值為fixed，即固定定位。它與絕對定位有些類似,區(qū)別主要在于定位的基準不是祖先，而是瀏覽器窗口或其它顯示設備窗口。
也就是當訪問者拖動瀏覽器的窗口滾動條時，固定定位的元素相對于瀏覽器窗口的位置保持不變。(IE6不支持固定定位)
簡單理解：它是以瀏覽器窗口作為參照標準來進行定位, 固定定位元素它不再占用空間
定位問題：
絕對定位問題：
當我們給一個子元素設置絕對定位,讓它在父元素的右下角顯示，這個時候
如果父元素的寬和高都為奇數(shù),那么在IE6下我們沒有方法讓這個子元素壓住邊框的
這個時候我們建議大家不要使用奇數(shù)作為長度
相對定位問題；
IE6下,它認為我們的父元素一定包住它里面的子元素,所以當子元素的寬度和高度大于父元素時,在IE下父元素就會被撐開,
這個時候我們想解決這個問題,我們可以給父元素設置overflow:hidden,但是此時IE6還是不起作用,
所以我們解決方法就是給子元素和父元素都設置相對定位
固定定位的問題：
當我們給一個固定定位的子元素(子元素position:fixed)的父元素添加相對定位或者絕對定位的時候,
它是不會跟著父元素移動的,仍然是相對屏幕的。
實例:導航條
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>導航條</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul,li{
list-style:none;
}
.box{
width:800px;
height:30px;
margin:100px auto;
}
li{
float:left;
width:180px;
text-align: center;
line-height:28px;
border:1px solid red;
margin-left:-1px;
}
li:hover{
border:1px solid green;
position:relative; /* 解決邊框被壓住問題 解釋:后面的li壓住前面一個li,使用相對定位后,提高了li顯示高度 */
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>HTML+CSS</li>
<li>javascript</li>
<li>jquery</li>
<li>php</li>
</ul>
</div>
</body>
</html>讓層水平居中的方法：
讓左右邊界自動判斷之下，即可達成左右位置呈現(xiàn)居中的目的。
#content {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
}
<div id="content">層內(nèi)容</div>若內(nèi)容區(qū)<div>之內(nèi)還有其他內(nèi)容<div>,其CSS屬性設置就需要加上"定位"position:absolute(或relative),以防firefox等其他瀏覽器出現(xiàn)錯誤
<div id="container">
<div id="content">
</div>
</div>
#container {
background-image: url(images/3-2-1-bg.jpg);
height: 400px;
width: 800px;
position: relative;
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
}
#content {
margin: 75px;
height: 210px;
width: 610px;
padding: 20px;
border: 1px solid #FFF;
position: absolute;
}讓層垂直居中的方法：
示：點擊上方"藍色字體"↑ 可以訂閱噢！
摘要 51RGB官方微信position是CSS中非常重要的一個屬性，通過position屬性，我們可以讓元素相對于其正常位置，父元素或者瀏覽器窗口進行偏移。postion也是初學者容易搞不清楚狀況的一個屬性，本文將從最基礎的知識講起，談談關于positon屬性的一些理論與應用。
postion屬性我們成為定位，它有4個不同類型的定位，這些類型會影響元素的生成方式，下面我們詳細說明position屬性。
（1）static
static是position屬性的默認值，默認情況下，塊級元素和行內(nèi)元素按照各自的特性進行顯示
（2）relative
relative翻譯成中文稱相對定位，設置了這個屬性后，元素會根據(jù)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，其相對于父元素進行偏移，并且原本的空間也占據(jù)著，下面的元素并不會頂替上去。
（3）absolute
元素設置成absolute后會脫離文檔流，并且不占有原本的空間，后面的元素會頂替上去，而且不論元素是行內(nèi)元素還是塊級元素，都會生成一個塊級框，也就是例如行內(nèi)元素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的表現(xiàn)方式類似于absolute，但是相比于absolute相對于不確定的父元素進行偏移，fixed就是相對于瀏覽器窗口進行偏移
在詳解CSS float屬性中我們提到包含塊這個概念。對于position屬性也有包含塊這個屬性，它要分幾種情況來討論：
1.根元素的包含塊，根元素一般是html元素，有些瀏覽器會使用body作為根元素，大多數(shù)瀏覽器，初始包含塊是一個視窗大小的矩形
2.非根元素的包含塊，如果該元素的position是relative或static，它的包含塊是最近的塊級框，表的單元格或行內(nèi)塊的內(nèi)容邊界
我們舉例進行說明，
HTML代碼
1 2 3 4 5 6 | <div> 我是父級元素的內(nèi)容 <div class="relative"> 相對定位元素 </div> </div> |
包含塊
這是相對定位元素的包含塊，為最近的塊級框，表的單元格或行內(nèi)塊的內(nèi)容邊界，相對定位元素相對于其包含塊進行偏移，我們可以簡單理解為相對于其原來的位置進行偏移。
3.非根元素的包含塊，如果該元素的position是absolute，則包含塊為最近的position不是static的祖先元素。簡單來說，它的包含塊會從父級元素一直向上查找，找到第一個position不是static的元素為止。
前面的例子中已經(jīng)涉及到偏移屬性，它指的是元素相對于其包含塊的偏移，我們稱其為偏移屬性，分別是top，bottom，left，right，依次代表上下左右。他們的值可以是具體的數(shù)值，也可以是百分比。如果是百分比，top和bottom是相對于包含塊高度的百分比，left和right是相對于寬度的百分比。它們也可以設置負值，即有可能將元素移動到包含塊的外邊。
接下來我們了解一下絕對定位的詳細細節(jié)。
一個元素被設置為絕對定位時，會脫離文檔流，然后相對其包含塊進行偏移。
一般來說，我們會將一個元素設置為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，根據(jù)body進行偏移，第二個絕對定位元素設置了一個relative的父元素，它根據(jù)父元素進行偏移。
元素設置成絕對定位后會脫離文檔流，并且失去占用的空間，而且如果偏移的位置接近，會造成重疊問題。看看下面的例子：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，數(shù)值越高的元素層級越高，就可以蓋住低于其層級的元素，我們設置第一個原色的z-index為10，結(jié)果如下
絕對定位的重疊問題
如果兩個元素的層級相同，則越后面的元素會覆蓋前面的元素，默認情況下，第二個元素就會蓋住第一個元素。
fixed定位很簡單，類似與absoulte，但是它的包含塊就是瀏覽器窗口，相對來說簡單很多。常見的應用比如固定導航，回到頂部。在這里不再贅述，大家可以查找相關資料。
relative定位的元素進行偏移后，不會脫離文檔流，還有占據(jù)原本的空間。除此之外，我們還要注意一個細節(jié)：如果元素設置了margin為負值之后發(fā)生重疊的情況下，相對定位的元素會覆蓋普通元素。我們看看下面的例子：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屬性最經(jīng)常的一個應用應該是作為absolute元素的包含塊了，為了限制absolute元素的偏移位置，常常設置其父元素為relative來作為其包含塊。
position的應用非常頻繁，下面我來說說常見的一些場景：
在電商網(wǎng)站中，我們常常可以看到產(chǎn)品的左上角或右上角有一些比如“新品”，“促銷”，“熱賣”等標簽，比如下圖：
產(chǎn)品標簽
這個是怎么實現(xiàn)的呢，我們來模擬一下：HTML代碼：
1 2 3 4 5 6 | <div class="product"> 我是產(chǎn)品 <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; } |
效果如下：
產(chǎn)品標簽
如圖所示，右上角有一個標簽。原理很簡單，就是設置父元素相對定位，標簽元素絕對定位，然后相對于父元素偏移到右上角。
自動完成框是一個非常常見的應用，其生成的下拉菜單也是用到了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屬性與輸入框?qū)R。
當然position的應用還有很多，比如布局，比如fixed可以用來做固定導航菜單，網(wǎng)頁右下角的固定菜單等，有興趣的同學可以自行查找相關資料進行學習。
position屬性是一個容易讓初學者迷惑的屬性，尤其是absolute和relative的應用。要用好它們，首先要從absolute和relative的基本特性開始了解，理解了他們的特性之后應用起來就得心應手了，了解基本原理后，多多寫幾個例子從實踐中去體會它們的特性，慢慢的就會熟悉了。
想認識志同道合的朋友一起學習web
加入我們的學習QQ群 19066743
豐富的學習資源，周一到周四免費直播公開課
長按圖片，識別二維碼即可入群
你可能感興趣的精彩內(nèi)容
微信：UI設計自學平臺加關注
長按關注：《UI設計自學平臺》
SS所提供的Position定位屬性在進行網(wǎng)頁頁面布局過程中非常重要，通過使用Position定位屬性可以實現(xiàn)對頁面元素進行精確定位，最終達到較好的設計及頁面展示效果。本文主要針對Position屬性設計教學案例，實現(xiàn)教學。
CSS學習教程
Position定位屬性為設計人員提供5類定位模式，分別為static靜態(tài)定位、relative相對定位、absolute絕對定位、fixed固定定位及sticky磁鐵定位模型。其中較常使用的是相對定位、絕對定位與固定定位三種模式。
以上給出了position屬性常用的定位方式，在實際進行頁面設計及元素布局過程中可以使用以上屬性實現(xiàn)元素的精確定位。
為演示定位屬性使用，本文設計制作上海世界技能大賽選手證，要求學生使用HTML進行選手證的設計及編碼實現(xiàn)。要求：
本例設計要求如上所示，設計實現(xiàn)參考效果如下所示：
參賽證設計樣式
參賽證設計樣式描述如上圖所示，基本元素來自世界技能大賽上海網(wǎng)站，主要logo包含上海世賽標識LOGO、選手照片與選手信息。所需素材如下：
案例所需素材
本例實現(xiàn)代碼如下所示：
CSS樣式文件
頁面body部分
本例實現(xiàn)代碼如上所示，其中CSS樣式部分用于實現(xiàn)div布局樣式，頁面body部分為頁面呈現(xiàn)內(nèi)容。本例父元素使用relative屬性進行定位，所有子元素均以父元素為基礎使用absolute進行精確定位。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區(qū)回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！如需完整案例代碼請關注并私信作者。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
