国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS：層疊樣式表—position

kid143 / 908人閱讀

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

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

常見語法

static | relative | absolute | sticky | fixed

static

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

relative

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

absolute

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

fixed

生成絕對定位的元素，相對于瀏覽器窗口進行定位。

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 屬性為它的默認值，可作用于任何 CSS 樣式。（IE 不支持該關(guān)鍵字）

unset

不設(shè)置

sticky

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

生效規(guī)則

  • 須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

  • 并且 top 和 bottom 同時設(shè)置時，top 生效的優(yōu)先級高，left 和 right 同時設(shè)置時，left 的優(yōu)先級高。

  • 設(shè)定為 position:sticky 元素的任意父節(jié)點的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這里需要解釋一下：

  • 如果 position:sticky 元素的任意父節(jié)點定位設(shè)置為 overflow:hidden，則父容器無法進行滾動，所以 position:sticky 元素也不會有滾動然后固定的情況。

  • 如果 position:sticky 元素的任意父節(jié)點定位設(shè)置為 position:relative | absolute | fixed，則元素相對父元素進行定位，而不會相對 viewprot 定位。

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

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

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

position:sticky;top:0;

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/2137.html

相關(guān)文章

  • CSS概念【記錄】

    摘要：語法規(guī)則注釋層疊優(yōu)先級繼承值塊格式化上下文盒模型層疊上下文可替換元素外邊距合并包含塊視覺格式化模型布局模式語法屬性值聲明聲明塊規(guī)則規(guī)則集規(guī)則規(guī)則一個語句定義樣式表使用的字符集告訴引擎引入一個外部樣式表嵌套規(guī)則如果滿足媒介查詢的條件則條件規(guī)則 1、CSS語法 2、@規(guī)則 3、注釋 4、層疊 5、優(yōu)先級 6、繼承 7、值 8、塊格式化上下文 9、盒模型 10、層疊上下文 11、可替換元素 12、...

    番茄西紅柿 評論0 收藏0

  • 前端--CSS

    摘要：一介紹是的簡稱中文稱為層疊樣式表用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離，層疊樣式表定義如何顯示元素。用于控制內(nèi)容與邊框之間的距離邊框圍繞在內(nèi)邊距和內(nèi)容外的邊框。內(nèi)容盒子的內(nèi)容，顯示文本和圖像。一.CSS介紹 CSS是Cascading Style Sheets的簡稱,中文稱為層疊樣式表,用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn),可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離. CSS（CascadingStyl...

    番茄西紅柿 評論0 收藏0

  • CSS 的介紹

    摘要：第一章宋體的介紹宋體層疊樣式表，它是宋體的縮寫，作用就是給宋體標簽加表現(xiàn)形式樣式宋體顯示，如字體，圖片，列表，位置等。宋體在制作網(wǎng)頁時必須是背景圖宋體宋體案例? 第一章?的介紹 ? 1.CSS：層疊樣式表，它是cascading style sheets的縮寫，作用就是給HTML標簽加表現(xiàn)形式（樣式-顯示），如：字體，圖片，列表，位置等。 在瀏覽器中可以看到部分： HTML：超文本標記語言...

    libxd 評論0 收藏0

  • 前端基礎(chǔ)入門二（CSS）

    摘要：輸入的時候少按一個鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時，英文字體名必須位于中文字體名之前。 回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

    Lorry_Lu 評論0 收藏0

  • CSS基礎(chǔ)匯總

    摘要：默認占滿整個頁面寬度，如果設(shè)置了指定寬度，則會用填充剩下的部分。關(guān)于浮動的兩個特點浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。允許浮動元素出現(xiàn)在兩側(cè)。CSS介紹 CSS（CascadingStyleSheet，層疊樣式表)定義如何顯示HTML元素。 當(dāng)瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。 CSS語法 CSS實例 每個CSS樣...

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<