成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS基礎(chǔ)篇-- position屬性講解

antyiwei / 2561人閱讀

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

postion 屬性定義了一個(gè)元素在頁(yè)面布局中的位置以及對(duì)周?chē)氐挠绊?。該屬性共?個(gè)值：

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

依次講解這6個(gè)值的應(yīng)用。

position: static

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

position: inherit

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

position: relative

relative 元素遵循正常的文檔流，所以周?chē)夭粫?huì)忽略它的存在，relative 元素同樣支持 top,bottom,left,right 等屬性。當(dāng)我們使用 top,bottom,left,right等屬性對(duì) relative 元素進(jìn)行相對(duì)定位時(shí)的效果有點(diǎn)類(lèi)似于 margin 屬性達(dá)到的效果，但是區(qū)別在于， relative 元素周?chē)脑貙?huì)忽略 relative 元素的移動(dòng)。我們注意，當(dāng) relative 元素未使用定位屬性進(jìn)行相對(duì)定位時(shí)，它不會(huì)被周?chē)脑睾雎?，但利用定位屬性進(jìn)行定位后，周?chē)脑貢?huì)忽略 relative 元素的移動(dòng)，它們會(huì)認(rèn)為 relative 元素仍然在原來(lái)的位置，并未進(jìn)行移動(dòng)，我們用個(gè)例子來(lái)說(shuō)明：

Im a relative element


Im a default element

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

Im a relative element


Im a default element

//忽略了 relative 元素的移動(dòng)

position: absolute

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

Im an absolute element


Im a default element

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

position: fixed

fixed 元素將會(huì)脫離正常的文檔流，所以它與 absolute 元素很相似，同樣會(huì)被周?chē)睾雎?，支?top,bottom,left,right 屬性，但兩者仍有很大不同。
首先，fixed 元素定位與它的父元素?zé)o任何關(guān)系，它永遠(yuǎn)是相對(duì)最外層的 window 進(jìn)行定位的。
第二，fixed 元素正如它的名字一樣，它是固定在屏幕的某個(gè)位置，它不會(huì)因?yàn)槠聊坏臐L動(dòng)而消失。

position: sticky

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

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

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

粘性定位常用于定位字母列表的頭部元素。標(biāo)示 B 部分開(kāi)始的頭部元素在滾動(dòng) A 部分時(shí)，始終處于 A 的下方。而在開(kāi)始滾動(dòng) B 部分時(shí)，B 的頭部會(huì)固定在屏幕頂部，直到所有 B 的項(xiàng)均完成滾動(dòng)后，才被 C 的頭部替代。

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


  

    
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 內(nèi)容:

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 屬性呢？那是因?yàn)?z-index 屬性只對(duì)定位元素有效，即 position 值為 absolute,relative,fixed 時(shí)才有效。我們首先了解下什么叫 z-index。

從上圖我們不難發(fā)現(xiàn) z-index 值代表的是元素的堆疊順序，值越高則顯示順序越優(yōu)先。

Im an absolute element


Im a fixed element

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

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

Im an absolute element


Im a fixed element

//z-index 值相同，仍然顯示為 fixed 元素
所以我們知道，當(dāng) z-index 值相同時(shí)，后加載的元素顯示優(yōu)先。

關(guān)于z-index屬性, 上下的層次關(guān)系也是按照樹(shù)狀結(jié)構(gòu)進(jìn)行層次劃分的, 優(yōu)先父元素之間的分集, 子元素這層次排序依賴(lài)于父元素的層次.

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

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

參考

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111126.html

相關(guān)文章

  • CSS基礎(chǔ)篇--使用position:sticky 實(shí)現(xiàn)粘性布局

    摘要：生效規(guī)則須指定或四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。并且和同時(shí)設(shè)置時(shí)，生效的優(yōu)先級(jí)高，和同時(shí)設(shè)置時(shí)，的優(yōu)先級(jí)高。設(shè)定為元素的任意父節(jié)點(diǎn)的屬性必須是，否則不會(huì)生效。 簡(jiǎn)介 前面寫(xiě)了一篇文章講解了position常用的幾個(gè)屬性：《CSS基礎(chǔ)篇-- position屬性講解》一般都知道下面幾個(gè)常用的： { position: static; position: r...

    ybak 評(píng)論0 收藏0

  • CSS基礎(chǔ)篇--頁(yè)面實(shí)現(xiàn)兩列布局，一列固定寬度，一列寬度自適應(yīng)方法

    摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應(yīng)。博客園的很多主題也是這樣設(shè)計(jì)的，我的博客園博客也是右側(cè)固定寬度，左側(cè)自適應(yīng)屏幕的布局方式。與配合使用首先我們調(diào)整一下結(jié)構(gòu)自適應(yīng)區(qū)固定寬度區(qū)代碼這樣實(shí)現(xiàn)，的實(shí)際寬度就是屏幕寬度。 我在前面有一篇文章《CSS基礎(chǔ)篇--可擴(kuò)展性的頁(yè)面布局》中介紹了如下三種布局方式：1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定2.左右結(jié)構(gòu)，左邊固定，右邊100%...

    RichardXG 評(píng)論0 收藏0

  • [練習(xí)]利用CSS steps 實(shí)現(xiàn)逐幀動(dòng)畫(huà)

    摘要：網(wǎng)頁(yè)逐幀動(dòng)畫(huà)的實(shí)現(xiàn)方式網(wǎng)頁(yè)中的逐幀動(dòng)畫(huà)，大致可分為兩大類(lèi)的實(shí)現(xiàn)方式，分別是使用控制，和單純使用實(shí)現(xiàn)，兩者的優(yōu)劣總體概括來(lái)說(shuō)就是動(dòng)畫(huà)可控性更強(qiáng)，但開(kāi)銷(xiāo)大，實(shí)現(xiàn)復(fù)雜。 網(wǎng)頁(yè)逐幀動(dòng)畫(huà)的實(shí)現(xiàn)方式 網(wǎng)頁(yè)中的逐幀動(dòng)畫(huà)，大致可分為兩大類(lèi)的實(shí)現(xiàn)方式， 分別是使用JS控制，和單純使用CSS實(shí)現(xiàn)，兩者的優(yōu)劣總體概括來(lái)說(shuō)就是： JS動(dòng)畫(huà)可控性更強(qiáng)，但開(kāi)銷(xiāo)大，實(shí)現(xiàn)復(fù)雜。 CSS動(dòng)畫(huà)實(shí)現(xiàn)相對(duì)JS更簡(jiǎn)單。常見(jiàn)的網(wǎng)...

    RiverLi 評(píng)論0 收藏0

  • CSS基礎(chǔ)篇--CSS3 calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)

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

    894974231 評(píng)論0 收藏0

  • HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇

    摘要：內(nèi)容簡(jiǎn)述關(guān)于，確實(shí)太繁雜了，內(nèi)容多。寫(xiě)好不易，基本上就這個(gè)調(diào)了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級(jí)元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內(nèi)聯(lián)元素可繼承。每個(gè)瀏覽器可能表現(xiàn)不一樣。 內(nèi)容簡(jiǎn)述 關(guān)于CSS，確實(shí)太繁雜了，內(nèi)容多。寫(xiě)好不易，基本上就這個(gè)調(diào)了。大家肯定聽(tīng)過(guò)CSS奇淫技巧吧，關(guān)于這個(gè)我還沒(méi)有去深入了解，只是說(shuō)普通的效果啥的，我...

    Salamander 評(píng)論0 收藏0

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

0條評(píng)論

antyiwei

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<