HTML中position的屬性值有哪些

這篇“HTML中position的屬性值有哪些”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“HTML中position的屬性值有哪些”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

上黨網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,上黨網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為上黨1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的上黨做網(wǎng)站的公司定做！

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

理論上來(lái)說(shuō)，全部 position 的取值有8個(gè)

包括：position：static | relative | absolute | fixed | sticky |  initial | inherit | unset

其中最常用的是 static 、relative、absolute、fixed 和 sticky

initial、inherit、unset 是css的關(guān)鍵字，任何css屬性的取值都可以設(shè)置這幾個(gè)值

position: static

默認(rèn)值，在正常流中，對(duì)設(shè)置的 top 、left、right、bottom、z-index 一應(yīng)忽略

position: relative

相對(duì)定位，相對(duì)于自己原來(lái)的位置偏移，（例：top: 10px; // 移動(dòng)后元素頂部位于原位置頂部下10px;）

脫離文檔流，但在文檔流中保留原位置的空間（預(yù)留空間），

也就是說(shuō)，元素原來(lái)位置會(huì)一直保留空白占位，相鄰兄弟元素會(huì)保持原來(lái)的位置，不會(huì)隨元素的移動(dòng)而改變

注意：position: relative 對(duì) table-*-group，table-row，table-column，table-cell，table-caption 元素?zé)o效。

栗子：

position: absolute

絕對(duì)定位，若祖先元素有設(shè)置 position: static 以外的屬性值，則相對(duì)該祖先元素絕對(duì)定位；否則，相對(duì)瀏覽器視口絕對(duì)定位

（在這里說(shuō)一個(gè)注意點(diǎn)，大多數(shù)人認(rèn)為是相對(duì) html 或 body 元素絕對(duì)定位，這是個(gè)誤區(qū)；當(dāng)頁(yè)面是可滾動(dòng)的，就可以看出是相對(duì)瀏覽器窗口絕對(duì)定位的了，而不是整個(gè) html 內(nèi)容；這里我也懶得寫(xiě)例子了，我就直接借鑒別人的吧：CSS進(jìn)階——絕對(duì)定位元素的寬高是如何定義的）

因此，一般做法是將該絕對(duì)定位元素的父元素加上 position: relative 屬性

脫離文檔流，不預(yù)留空間，該元素下的兄弟元素位置上移

栗子：

但 position: absolute 并不僅有以上這個(gè)用途；

在按其內(nèi)容大小調(diào)整尺寸的元素（例如 height 和 width 被設(shè)定為 auto，又或者行內(nèi)元素），若該元素被絕對(duì)定位 position: absulute ，則可以通過(guò)指定 top / bottom / left / right , 保留 height 未指定（即 auto）, 來(lái)填充可用的垂直（水平）空間

什么意思呢？淡定，來(lái)吃些栗子吧：

（除此之外，絕對(duì)定位的元素可以設(shè)置外邊距（margin），且不會(huì)與其他邊距合并，這個(gè)就不舉栗子了）

寫(xiě)上面例子的時(shí)候還是有個(gè)疑問(wèn)的：

既然絕對(duì)定位是脫離文檔流的，為什么行內(nèi)元素絕對(duì)定位的時(shí)候，在不設(shè)置 left 值時(shí)，它的原點(diǎn)是位于原位置的原點(diǎn)的呢？而不是位于父元素的原點(diǎn)呢？

（找了許久沒(méi)找著原因，這個(gè)留著以后慢慢解答吧）

position: fixed

固定定位，相對(duì)瀏覽器窗口固定定位，不隨滾動(dòng)條滾動(dòng)，實(shí)現(xiàn)的樣本就是日常網(wǎng)頁(yè)中的廣告彈窗

脫離文檔流，fixed 屬性會(huì)創(chuàng)建新的層疊上下文。

注意：當(dāng)該固定元素的祖先元素的 transform 屬性非 none 時(shí)，容器由瀏覽器窗口改為該祖先元素

position: sticky

粘性定位，相當(dāng)于相對(duì)定位和固定定位的混合。粘性定位根據(jù)一個(gè)閾值決定，在大于等于閾值時(shí)采用相對(duì)定位，小于閾值后則為固定定位。

這個(gè)閾值就是 top 、right 、bottom 、left 四種之一，必須設(shè)置了其中一個(gè)，才能讓粘性定位生效，否則一直表現(xiàn)為相對(duì)定位。

粘性定位除了以上條件之外，還有幾點(diǎn)需要注意，否則粘性定位會(huì)失效：

1. 父元素的內(nèi)容需滾動(dòng)查看，且不能有 overflow: hidden 、 overflow: auto 屬性

2. 父元素的高度不能低于粘性定位元素的高度

3. sticky 是容器相關(guān)的，只會(huì)在它所處的容器（父元素）里生效。

sticky 栗子：demo

粘性定位的兼容問(wèn)題：

1. 需寫(xiě)下兩條css語(yǔ)句：

position: sticky;  和 position: -webkit-sticky; /* Safari */

2.Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。

position: initial

initial 關(guān)鍵字用于設(shè)置CSS屬性為它的默認(rèn)值（在這里也就是 position: static）

注： IE不支持該關(guān)鍵字

position: inherit

每個(gè) CSS 屬性定義的概述都指出了這個(gè)屬性是默認(rèn)繼承的 ("Inherited: Yes") 還是默認(rèn)不繼承的 ("Inherited: no")。

關(guān)于 inherit 的妙用可以看看這里：談?wù)勔恍┯腥さ腃SS題目（四）– 從倒影說(shuō)起，談?wù)?CSS 繼承 inherit

position: unset

unset 關(guān)鍵字是 initial 和inherit 的組合:

1. 如果該屬性是默認(rèn)繼承屬性，則該值等同于 inherit

2. 如果該屬性是非繼承屬性，則該值等同于 initial

感謝你的閱讀，希望你對(duì)“HTML中position的屬性值有哪些”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：HTML中position的屬性值有哪些
網(wǎng)站地址：http://m.jiaotiyi.com/article/gdhgdo.html