CSS基礎篇-- position屬性講解

antyiwei 發布于2019-08-28 18:15 / 2550人閱讀

摘要：為屬性的默認值，元素會遵循正常的文檔流，且會忽略等屬性。粘性定位常用于定位字母列表的頭部元素。須指定或四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值：

1. position: static
2. position: inherit
3. position: relative
4. position: absolute
5. position: fixed
6. position: sticky(new)

依次講解這6個值的應用。

position: static

static 為position 屬性的默認值，static 元素會遵循正常的文檔流，且會忽略 top,bottom,left,right 等屬性。

position: inherit

inherit 值如同其他 css 屬性的 inherit 值，即繼承父元素的 position 值。

position: relative

relative 元素遵循正常的文檔流，所以周圍元素不會忽略它的存在，relative 元素同樣支持 top,bottom,left,right 等屬性。當我們使用 top,bottom,left,right等屬性對 relative 元素進行相對定位時的效果有點類似于 margin 屬性達到的效果，但是區別在于， relative 元素周圍的元素將會忽略 relative 元素的移動。我們注意，當 relative 元素未使用定位屬性進行相對定位時，它不會被周圍的元素忽略，但利用定位屬性進行定位后，周圍的元素會忽略 relative 元素的移動，它們會認為 relative 元素仍然在原來的位置，并未進行移動，我們用個例子來說明：

Im a relative element
Im a default element

//并未忽略 relative 元素的存在

Im a relative element
Im a default element

//忽略了 relative 元素的移動

position: absolute

absolute 元素將會脫離正常的文檔流，所以其周圍的元素將會忽略它的存在。如同 absolute 元素的 display 屬性被設為了 none 一樣。此時，我們可以使用 top,bottom,left,right 等屬性對 absolute 元素進行絕對定位。一般情況下定義兩個屬性，top 或 bottom,left 或 right。
這個絕對定位需要稍微理解下，因為這里容易與 relative 產生混淆。
例如，當對 absolute 元素添加 left:10px 定位后，這個 left 究竟是對哪個元素而言呢？其實，此時將會往上查找 absolute 元素的第一個父元素，如果該父元素的 position 值存在（且不為 static）,那么這個 left:10px 就是根據該父元素進行的定位，否則將會繼續查找該父元素的父元素，一直追溯到某個父元素具備不為 static 的 position 值為止，如果不存在滿足條件的父元素，則會根據最外層的 window 進行定位。

Im an absolute element
Im a default element

//直接忽略 absolute 元素的存在

position: fixed

fixed 元素將會脫離正常的文檔流，所以它與 absolute 元素很相似，同樣會被周圍元素忽略，支持 top,bottom,left,right 屬性，但兩者仍有很大不同。
首先，fixed 元素定位與它的父元素無任何關系，它永遠是相對最外層的 window 進行定位的。
第二，fixed 元素正如它的名字一樣，它是固定在屏幕的某個位置，它不會因為屏幕的滾動而消失。

position: sticky

粘性定位是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。例如：

#one { position: sticky; top: 10px; }

在 viewport 視口滾動到元素 top 距離小于 10px 之前，元素為相對定位。之后，元素將固定在與頂部距離 10px 的位置，直到 viewport 視口回滾到閾值以下。

粘性定位常用于定位字母列表的頭部元素。標示 B 部分開始的頭部元素在滾動 A 部分時，始終處于 A 的下方。而在開始滾動 B 部分時，B 的頭部會固定在屏幕頂部，直到所有 B 的項均完成滾動后，才被 C 的頭部替代。

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


  
    A
    Andrew W.K.
    Apparat
    Arcade Fire
    At The Drive-In
    Aziz Ansari
  
  
    C
    Chromeo
    Common
    Converge
    Crystal Castles
    Cursive
  
  
    E
    Explosions In The Sky
  
  
    T
    Ted Leo & The Pharmacists
    T-Pain
    Thrice
    TV On The Radio
    Two Gallants

CSS 內容:

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC
}

兼容性如圖所示：

z-index

為什么要在這里提到 z-index 屬性呢？那是因為 z-index 屬性只對定位元素有效，即 position 值為 absolute,relative,fixed 時才有效。我們首先了解下什么叫 z-index。

從上圖我們不難發現 z-index 值代表的是元素的堆疊順序，值越高則顯示順序越優先。

Im an absolute element
Im a fixed element

//fixed 元素 z-index 比 absoulute 元素高，所以顯示在前面

（我把背景色調為非透明，這樣可以看得更清楚），假如 z-index 值相同會出現什么情況呢？

Im an absolute element
Im a fixed element

//z-index 值相同，仍然顯示為 fixed 元素
所以我們知道，當 z-index 值相同時，后加載的元素顯示優先。

關于z-index屬性, 上下的層次關系也是按照樹狀結構進行層次劃分的, 優先父元素之間的分集, 子元素這層次排序依賴于父元素的層次.

例如:
某A元素z-index:1; 其父元素z-index:100,
某B元素z-index:100; 其父元素z-index:99,
某C元素z-index:2; 其父元素與A相同

則瀏覽器之中A元素的顯示層次一定優高于B元素; C顯示的層次高于A元素;

參考

http://www.vanseodesign.com/css/css-positioning/
mozilla:position
使用 position:sticky 實現粘性布局
參考地址：http://segmentfault.com/a/119...

GPU云服務器云服務器 position屬性，css position，css 屬性篇基礎篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111126.html

CSS基礎篇--使用position:sticky 實現粘性布局

摘要：生效規則須指定或四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。并且和同時設置時，生效的優先級高，和同時設置時，的優先級高。設定為元素的任意父節點的屬性必須是，否則不會生效。簡介前面寫了一篇文章講解了position常用的幾個屬性：《CSS基礎篇-- position屬性講解》一般都知道下面幾個常用的： { position: static; position: r...

ybak 2019-08-30 13:52 評論0 收藏0
CSS基礎篇--頁面實現兩列布局，一列固定寬度，一列寬度自適應方法

摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應。博客園的很多主題也是這樣設計的，我的博客園博客也是右側固定寬度，左側自適應屏幕的布局方式。與配合使用首先我們調整一下結構自適應區固定寬度區代碼這樣實現，的實際寬度就是屏幕寬度。我在前面有一篇文章《CSS基礎篇--可擴展性的頁面布局》中介紹了如下三種布局方式：1.左右結構，左邊100%；右邊寬度固定2.左右結構，左邊固定，右邊100%...

RichardXG 2019-08-28 17:51 評論0 收藏0
[練習]利用CSS steps 實現逐幀動畫

摘要：網頁逐幀動畫的實現方式網頁中的逐幀動畫，大致可分為兩大類的實現方式，分別是使用控制，和單純使用實現，兩者的優劣總體概括來說就是動畫可控性更強，但開銷大，實現復雜。網頁逐幀動畫的實現方式網頁中的逐幀動畫，大致可分為兩大類的實現方式，分別是使用JS控制，和單純使用CSS實現，兩者的優劣總體概括來說就是： JS動畫可控性更強，但開銷大，實現復雜。 CSS動畫實現相對JS更簡單。常見的網...

RiverLi 2019-08-30 12:55 評論0 收藏0
CSS基礎篇--CSS3 calc實現滾動條出現頁面不跳動

摘要：不過最大的好處就是用在流體布局上，可以通過計算得到元素的寬度。于是，就是瀏覽器滾動條的寬度大小如果有，如果沒有滾動條則是左右都有一個滾動條寬度或都是被占用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動參考的使用什么是calc()? calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來...

894974231 2019-08-30 13:45 評論0 收藏0
HTML+CSS復習之CSS基礎篇

摘要：內容簡述關于，確實太繁雜了，內容多。寫好不易，基本上就這個調了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內聯元素可繼承。每個瀏覽器可能表現不一樣。內容簡述關于CSS，確實太繁雜了，內容多。寫好不易，基本上就這個調了。大家肯定聽過CSS奇淫技巧吧，關于這個我還沒有去深入了解，只是說普通的效果啥的，我...

Salamander 2019-08-29 12:38 評論0 收藏0