溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css定位position屬性怎么使用”，在日常操作中，相信很多人在css定位position屬性怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css定位position屬性怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
。
background-position 背景定位
如果，說浮動， 關(guān)鍵在一個(gè) “浮” 字上面， 那么 我們的定位，關(guān)鍵在于一個(gè) “位” 上。
PS: 定位是我們CSS算是數(shù)一數(shù)二難點(diǎn)的了，但是，你務(wù)必要學(xué)好它，我們CSS離不開定位，特別是后面的js特效，天天和定位打交道。不要抵觸它，反而要愛上它，它可以讓我們工作更加輕松哦！
那么定位，最長運(yùn)用的場景再那里呢？ 來看幾幅圖片，你一定會有感悟！
小黃色塊可以再圖片上移動：
左右箭頭壓住圖片：
hot 再盒子外面多出一塊，更加突出：
以上三個(gè)小地方，如果用標(biāo)準(zhǔn)流或者浮動，實(shí)現(xiàn)會比較復(fù)雜或者難以實(shí)現(xiàn)，此時(shí)我們用定位來做。
元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
| 邊偏移屬性 | 描述 |
|---|---|
| top | 頂端偏移量，定義元素相對于其父元素上邊線的距離 |
| bottom | 底部偏移量，定義元素相對于其父元素下邊線的距離 |
| left | 左側(cè)偏移量，定義元素相對于其父元素左邊線的距離 |
| right | 右側(cè)偏移量，定義元素相對于其父元素右邊線的距離 |
也就說，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分類)
在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
| 值 | 描述 |
|---|---|
| static | 自動定位（默認(rèn)定位方式） |
| relative | 相對定位，相對于其原文檔流的位置進(jìn)行定位 |
| absolute | 絕對定位，相對于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位 |
| fixed | 固定定位，相對于瀏覽器窗口進(jìn)行定位 |
靜態(tài)定位是所有元素的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個(gè)元素在HTML文檔流中默認(rèn)的位置。
上面的話翻譯成白話： 就是網(wǎng)頁中所有元素都默認(rèn)的是靜態(tài)定位。 其實(shí)就是標(biāo)準(zhǔn)流的特性。
在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。
其實(shí)沒啥，靜態(tài)定位唯一的用處：就是 取消定位。 position: static;
相對定位是將元素相對于它在標(biāo)準(zhǔn)流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對（自己的）位置。
對元素設(shè)置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留（保留原來所占位置）。如下圖所示，即是一個(gè)相對定位的效果展示：
注意：
相對定位最重要的一點(diǎn)是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續(xù)占有。
其次，每次移動的位置，是以自己的左上角為基點(diǎn)移動（相對于自己來移動位置）
就是說，相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。（相對定位不脫標(biāo)）
如果說浮動的主要目的是 讓多個(gè)塊級元素一行顯示，那么定位的主要價(jià)值就是 移動位置， 讓盒子到我們想要的位置上去。
[注意] 如果文檔可滾動，絕對定位元素會隨著它滾動，因?yàn)樵刈罱K會相對于正常流的某一部分定位。
當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對定位。
注意： 絕對定位最重要的一點(diǎn)是，它可以通過邊偏移移動位置，但是它完全脫標(biāo)，完全不占位置。
絕對定位absolute又分三種情況：
若所有父元素都沒有定位，以瀏覽器當(dāng)前屏幕為準(zhǔn)對齊(document文檔)。
絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素（祖先）進(jìn)行定位。
這句話的意思是子級是絕對定位的話， 父級要用相對定位。
首先， 我們說下， 絕對定位是將元素依據(jù)最近的已經(jīng)定位絕對、固定或相對定位）的父元素（祖先）進(jìn)行定位。
就是說，子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說， 子絕父絕，子絕父相都是正確的。但是，極力推薦用相對位置
但是，在我們網(wǎng)頁布局的時(shí)候， 最常說的 子絕父相是怎么來的呢？ 請看如下圖：
所以，我們可以得出如下結(jié)論：
因?yàn)樽蛹壥墙^對定位，不會占有位置， 可以放到父盒子里面的任何一個(gè)地方。
父盒子布局時(shí)，需要占有位置，因此父親只能是 相對定位.
這就是子絕父相的由來。
普通的盒子是左右margin 改為 auto就可， 但是對于絕對定位就無效了
定位的盒子也可以水平或者垂直居中，有一個(gè)算法。
首先left 50% 父盒子的一半大小
然后走自己外邊距負(fù)的一半值就可以了 margin-left。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
background-color: pink;
/*margin: 100px auto;*/
/*float: left;*/
position: absolute;
/*加了定位 浮動的的盒子 margin 0 auto 失效了*/
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
}
</style></head><body>
<p></p></body></html>固定定位是絕對定位的一種特殊形式，類似于 正方形是一個(gè)特殊的 矩形。它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時(shí)，即可將元素的定位模式設(shè)置為固定定位。
當(dāng)對元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。
固定定位有兩點(diǎn)：
固定定位的元素跟父親沒有任何關(guān)系，只認(rèn)瀏覽器。
固定定位完全脫標(biāo)，不占有位置，不隨著滾動條滾動。
ie6等低版本瀏覽器不支持固定定位。
當(dāng)對多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會發(fā)生重疊。
在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對定位元素應(yīng)用z-index層疊等級屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。
比如： z-index: 2; font-weight: 700
注意：
z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據(jù)書寫順序，后來居上。
后面數(shù)字一定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其余標(biāo)準(zhǔn)流，浮動，靜態(tài)定位都無此屬性，亦不可指定此屬性。
| 定位模式 | 是否脫標(biāo)占有位置 | 是否可以使用邊偏移 | 移動位置基準(zhǔn) |
|---|---|---|---|
| 靜態(tài)static | 不脫標(biāo)，正常模式 | 不可以 | 正常模式 |
| 相對定位relative | 脫標(biāo)，占有位置 | 可以 | 相對自身位置移動（自戀型） |
| 絕對定位absolute | 完全脫標(biāo)，不占有位置 | 可以 | 相對于定位父級移動位置（拼爹型） |
| 固定定位fixed | 完全脫標(biāo)，不占有位置 | 可以 | 相對于瀏覽器移動位置（認(rèn)死理型） |
跟 浮動一樣， 元素添加了 絕對定位和固定定位之后， 元素模式也會發(fā)生轉(zhuǎn)換， 都轉(zhuǎn)換為行內(nèi)塊模式，
行內(nèi)塊 的寬度和高度 跟內(nèi)容有關(guān)系
** 因此 比如 行內(nèi)元素 如果添加了 絕對定位或者 固定定位后 浮動后，可以不用轉(zhuǎn)換模式，直接給高度和寬度就可以了。**
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.sf {
width: 1259px;
height: 472px;
margin: 100px auto;
position: relative;
}
.nav {
width: 960px;
height: 80px;
background-color: #000;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -480px;
}
.nav li {
list-style-type: none;
width: 160px;
height: 80px;
float: left;
}
.nav li a {
width: 160px;
height: 80px;
display: block;
text-align: center;
line-height: 80px;
color: #fff;
text-decoration: none;
}
.nav li a:hover {
color: #000;
background-color: #fff;
}
</style></head><body>
<p class="sf">
<a href="#">
<img src="images/sf.png" alt="" height="472" width="1259">
</a>
<p class="nav">
<ul>
<li><a href="#">快遞查詢</a></li>
<li><a href="#">快遞查詢</a></li>
<li><a href="#">快遞查詢</a></li>
<li><a href="#">快遞查詢</a></li>
<li><a href="#">快遞查詢</a></li>
<li><a href="#">快遞查詢</a></li>
</ul>
</p>
</p></body></html>到此，關(guān)于“css定位position屬性怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼