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

資訊專欄INFORMATION COLUMN

詳解 CSS 屬性 - position

joywek / 2170人閱讀

摘要：屬性定義了一個(gè)元素在頁(yè)面布局中的位置以及對(duì)周圍元素的影響。元素將會(huì)脫離正常的文檔流，所以其周圍的元素將會(huì)忽略它的存在。此時(shí)，我們可以使用等屬性對(duì)元素進(jìn)行絕對(duì)定位。一般情況下定義兩個(gè)屬性，或或。

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

position: absolute

position: relative

position: fixed

position: static

position: inherit

本文主要詳細(xì)討論 position 屬性的前三個(gè)值，首先大概講解下后兩個(gè)值：

static

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

inherit

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

absolute

absolute 元素將會(huì)脫離正常的文檔流，所以 其周圍的元素將會(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 值為止，如果不存在滿足條件的父元素，則會(huì)根據(jù)最外層的 window 進(jìn)行定位。

Im an absolute element


Im a default element

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

relative

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

Im a relative element


Im a default element

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

Im a relative element


Im a default element

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

fixed

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


  
Im an absolute element

  
Im a fixed element

  
Im a default element

//如同 absolute，fixed元素也被周圍元素忽略

因?yàn)橥鈱?div 高度超過一屏，所以現(xiàn)在我們往下滾動(dòng)屏幕。

//只有 fixed 元素未因?yàn)槠聊粷L動(dòng)而消失，因?yàn)樗恰肮潭ā钡?/b>

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)先。

參考

http://www.vanseodesign.com/css/css-positioning/

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

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

相關(guān)文章

  • [CSS]CSS Position 詳解

    摘要：三生成固定定位的元素，相對(duì)于瀏覽器窗口定位，即瀏覽器窗口滾動(dòng)也不會(huì)影響元素位置，元素的位置與文檔流無關(guān)，因此不占據(jù)空間，可能會(huì)和其他元素發(fā)生重疊。，元素脫離文檔流，相對(duì)于以外的第一個(gè)父元素定位。 一. CSS position 屬性介紹 CSS中position屬性指定一個(gè)元素（靜態(tài)的，相對(duì)的，絕對(duì)或固定）的定位方法的類型。有static，relative，absolute和fixed...

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

  • [CSS]CSS Position 詳解

    摘要：三生成固定定位的元素，相對(duì)于瀏覽器窗口定位，即瀏覽器窗口滾動(dòng)也不會(huì)影響元素位置，元素的位置與文檔流無關(guān)，因此不占據(jù)空間，可能會(huì)和其他元素發(fā)生重疊。，元素脫離文檔流，相對(duì)于以外的第一個(gè)父元素定位。 一. CSS position 屬性介紹 CSS中position屬性指定一個(gè)元素（靜態(tài)的，相對(duì)的，絕對(duì)或固定）的定位方法的類型。有static，relative，absolute和fixed...

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

  • 帶你走進(jìn)CSS定位詳解

    摘要：相對(duì)于其最近的一個(gè)定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位，可用。代碼基本語法默認(rèn)值，無特殊定位。代碼相對(duì)定位相對(duì)定位生成相對(duì)定位的元素，相對(duì)于其它位置進(jìn)行定位。結(jié)語結(jié)語帶你走進(jìn)定位詳解，多試試，熟能生巧嘛 學(xué)習(xí)CSS相關(guān)知識(shí)，定位是其中的重點(diǎn)，也是難點(diǎn)之一，如果不了解css定位有時(shí)候都不知道怎么用，下面整理了一下關(guān)于定位屬性的具體理解和應(yīng)用方案。 一：定位 定位屬性列表 position top...

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

  • css定位案例探討（position屬性詳解）

    簡(jiǎn)述 定位問題一直是新手學(xué)習(xí)css的一個(gè)難點(diǎn)，現(xiàn)在我將他們總結(jié)出來，希望對(duì)大家有幫助 position詳解 在css中，通過position屬性，配合top,right,left,buttom對(duì)元素進(jìn)行定位position屬性有：static，relative，absolute，fixed四種，下面分別探討 默認(rèn)定位static Document ...

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

  • css控制UL LI 的樣式詳解(推薦)

    摘要：，這一句是刪除的縮進(jìn)，這樣做可以使所有的列表內(nèi)容都不縮進(jìn)。中的與樣式詳解和列表是使用布局頁(yè)面時(shí)常用的元素。這里是列表內(nèi)容這里是列表內(nèi)容四屬性屬性是綜合設(shè)置樣式的屬性，也是一個(gè)可以繼承的屬性，語法結(jié)構(gòu)如下各個(gè)值的位置可以交換。代碼如下: ??首頁(yè)??博客??設(shè)計(jì)??相冊(cè)??論壇??關(guān)于??? CSS:? 復(fù)制代碼 代碼如下: #menu ul {list-style:none;margi...

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

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

0條評(píng)論

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