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

資訊專欄INFORMATION COLUMN

天坑，CSS之定位Position（六分之五）

anRui / 3339人閱讀

摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區(qū)域定位。

Position定位 
個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當(dāng)年可是被虐的不輕。當(dāng)然了，現(xiàn)在愛上了這個屬性，誰用誰知道。
position屬性

position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。

對應(yīng)了四個與之相關(guān)的位置屬性，top、right、bottom、left，分別是指離上、右、下、左的距離，注意是設(shè)定后移動自身，不是擠走別的元素。

下文稱位置屬性即為top、right、bottom、left。

如果一個頁面，不通過position的調(diào)整，在如今看來，將是極度難以忍受的。其主要包含下列屬性值，不含繼承的話，共有5個，以下一一例舉：

static

直譯為靜態(tài)，默認(rèn)值，在其上使用position的位置屬性無效。

relative

直譯為相對，與static近似，但在其上使用position的位置屬性有效。

注意，relative不會脫離文檔流，具體見下面的圖示。

absolute

直譯為絕對，向上尋找 第一個非static定位的標(biāo)簽，然后位置屬性相對其有效。如果沒有找到，則相對document。

向上尋找：標(biāo)簽存在父子級關(guān)系，由子級向父級乃至祖宗級直到body為止。向下則相反。
absolute會脫離文檔流。

fixed

直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區(qū)域定位。

fixed會脫離文檔流。

sticky

直譯為粘性，當(dāng)相應(yīng)內(nèi)容顯示在視覺范圍內(nèi)，則表現(xiàn)為relative定位，當(dāng)內(nèi)容即將逃出顯示區(qū)域時，切換為fixed定位。

sticky不會脫離文檔流，即使換成了fixed。

以下針對5種定位做出圖文描述

static

static設(shè)置位置屬性是無效的

static為了方便理解還是與relative對比可以看出效果

relative

relative設(shè)置位置屬性有效，并且沒有脫離原本文檔流，只是顯示位置變化了而已

absolute

此圖是證明相對于document

absolute的最大難點就是具體相對誰的定位：

absolute相對的是向上第一個不是static默認(rèn)定位的元素，如果沒有找到，則相對于document

此圖是證明相對于非static的父級標(biāo)簽，也可以自己試試，父級標(biāo)簽都是默認(rèn)會如何。

fixed

相對于瀏覽器窗口顯示內(nèi)容定位

如果對fixed元素的父級元素設(shè)置了transform，則回導(dǎo)致fixed失效，這里有個印象就好。

sticky

處在顯示區(qū)域中是使用relative，當(dāng)要逃出顯示區(qū)域時切換為fixed

新出的，兼容性注意下就好，非常適合做一下標(biāo)題模塊。

以上就是position相關(guān)的速講知識，有疑問或者其他可以留言詢問。
如果文章對你有一點幫助，我就非常的開心了。
喜歡我的文章，請關(guān)注我，定期發(fā)布技術(shù)文章，滿滿的干貨。
源碼相關(guān)

CodePen

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

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

相關(guān)文章

  • 天坑，CSS之定位Position（六分之五）

    摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區(qū)域定位。 Position定位 個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當(dāng)年可是被虐的不輕。當(dāng)然了，現(xiàn)在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。 對應(yīng)了四...

    xuweijian 評論0 收藏0

  • CSS入門之引用、選擇器、屬性（六分之三）

    摘要：入門教程六分之三篇沒辦法，我直播教小伙伴入門，屬性講完，準(zhǔn)備說定位的時候，他們就喊停，不住了。。。選擇器表達(dá)式如下相關(guān)效果見表達(dá)式關(guān)鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。 CSS 入門教程六分之三篇 沒辦法，我直播教小伙伴CSS入門，屬性講完，準(zhǔn)備說定位的時候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333 要點 解釋 引用 如...

    baishancloud 評論0 收藏0

  • CSS入門之盒模型（六分之四）

    摘要：盒模型要點知識務(wù)必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細(xì)說歷史原因，只說其作用。嚴(yán)格來說與標(biāo)簽大小無關(guān)，但是影響視覺上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點知識 務(wù)必注意看，這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個值： content-box...

    yearsj 評論0 收藏0

發(fā)表評論

0條評論

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