CSS：層疊樣式表—position

kid143 發(fā)布于2019-04-23 13:38 / 970人閱讀

摘要：脫離了文檔流不為元素預(yù)留空間，通過(guò)指定元素相對(duì)于最近的非定位祖先元素的偏移，來(lái)確定元素位置。在所有情況下即便被定位元素為時(shí)，該元素定位均不對(duì)后續(xù)元素造成影響。否則其行為與相對(duì)定位相同。生效規(guī)則須指定或四個(gè)閾值其中之一，才可使粘性定位生效。

CSS position屬性用于指定一個(gè)元素在文檔中的定位方式。top，right，bottom和left屬性則決定了該元素的最終位置。

常見(jiàn)語(yǔ)法

static | relative | absolute | sticky | fixed

static

默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

relative

生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位(不改變頁(yè)面布局,因此會(huì)在此元素未添加定位時(shí)所在位置留下空白)。

absolute

生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。脫離了文檔流,不為元素預(yù)留空間，通過(guò)指定元素相對(duì)于最近的非 static 定位祖先元素的偏移，來(lái)確定元素位置。絕對(duì)定位的元素可以設(shè)置外邊距（margins），且不會(huì)與其他邊距合并。

fixed

生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

inherit

規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

可繼承的屬性：

所有元素可繼承：visibility、cursor
內(nèi)聯(lián)元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
塊狀元素可繼承：text-indent和text-align
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image
表格元素可繼承：border-collapse

不可繼承的屬性：

background-color...

initial

設(shè)置 CSS 屬性為它的默認(rèn)值，可作用于任何 CSS 樣式。（IE 不支持該關(guān)鍵字）

unset

不設(shè)置

sticky

盒位置根據(jù)正常流計(jì)算(這稱為正常流動(dòng)中的位置)，然后相對(duì)于該元素在流中的 flow root（BFC）和 containing block（最近的塊級(jí)祖先元素）定位。在所有情況下（即便被定位元素為 table 時(shí)），該元素定位均不對(duì)后續(xù)元素造成影響。當(dāng)元素 B 被粘性定位時(shí)，后續(xù)元素的位置仍按照 B 未定位時(shí)的位置來(lái)確定。position: sticky 對(duì) table 元素的效果與 position: relative 相同。
元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。
這個(gè)特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。

生效規(guī)則

須指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。
并且 top 和 bottom 同時(shí)設(shè)置時(shí)，top 生效的優(yōu)先級(jí)高，left 和 right 同時(shí)設(shè)置時(shí)，left 的優(yōu)先級(jí)高。
設(shè)定為 position:sticky 元素的任意父節(jié)點(diǎn)的 overflow 屬性必須是 visible，否則 position:sticky 不會(huì)生效。這里需要解釋一下：
如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 overflow:hidden，則父容器無(wú)法進(jìn)行滾動(dòng)，所以 position:sticky 元素也不會(huì)有滾動(dòng)然后固定的情況。
如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 position:relative | absolute | fixed，則元素相對(duì)父元素進(jìn)行定位，而不會(huì)相對(duì) viewprot 定位。

由于兼容性不好而不被重用，火狐和IOS有很好的支持性。

應(yīng)用場(chǎng)景：電話薄和微信通訊錄的字母吸頂條。

現(xiàn)在只需要一個(gè)屬性：

position:sticky;top:0;

GPU云服務(wù)器云服務(wù)器 css樣式表 html外部層疊樣式 position，css position屬性，css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2137.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

kid143

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C語(yǔ)言和C++的區(qū)別和聯(lián)系

閱讀 3337·2021-11-18 10:02
香港云服務(wù)器哪家價(jià)格最低?阿里云/騰訊云/易探云/UCloud推薦

閱讀 2088·2021-09-22 10:54
移動(dòng)端復(fù)制文本到粘貼板，clipboard.js的使用，移動(dòng)端與PC端復(fù)制粘貼兼容寫(xiě)法

閱讀 3037·2019-08-30 15:43
前端技術(shù)資訊網(wǎng)站

閱讀 2646·2019-08-30 13:22
盒馬微信小程序

閱讀 1629·2019-08-29 13:57
HTML5擴(kuò)展了 HTMLDocument ，增加了新的功能。

閱讀 1115·2019-08-29 13:27
什么是同源/跨域？什么是CORS？什么是JSONP？

閱讀 804·2019-08-26 14:05
2018年在Java、Web和移動(dòng)開(kāi)發(fā)方面最值得關(guān)注的12大開(kāi)源框架

閱讀 2594·2019-08-26 13:30

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS：層疊樣式表—position

CSS position屬性用于指定一個(gè)元素在文檔中的定位方式。top，right，bottom和left屬性則決定了該元素的最終位置。

常見(jiàn)語(yǔ)法

static

默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。