亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

固定層效果

難度初級
時長32分
學習人數
綜合評分9.67
353人評價 查看評價
9.9 內容實用
9.6 簡潔易懂
9.5 邏輯清晰
  • CSS固定層 : 1.position:fixed; 固定定位 2.緊后元素會和fixed定位元素發生重疊,需要設置其margin屬性 margin-top=原有高度+距離高度
    查看全部
    0 采集 收起 來源:編程挑戰

    2015-08-25

  • fixed參照物是你的瀏覽器可視窗口,跟頁面上下內容沒關系。absolute參照的是父級中最近的使用absolute或者relative的元素,如果父級元素都沒使用position屬性,那該元素就直接參照瀏覽器左上角。
    查看全部
    0 采集 收起 來源:編程挑戰

    2015-08-25

  • 1.由于給top選擇器設置fixed固定定位時,(top層已經脫離了標準文檔流)沒有對其設置偏移量,以其父包裹層定位,(當top選擇器fixed固定定位設置了偏移量時,則top層的位置按照所設置的偏移量的位置定位),而其父包裹層body的margin與mainbody的上margin值發生了重疊,(此時的body與mainbody屬于標準文檔流)mainbody的上margin值大于body的margin值,選擇了mainbody的上margin值20px(標準文檔流中上下margin發生重疊時選擇margin值大的那個)所以body下移20px;top層又以body層定位,從而導致了top層與瀏覽器可視窗口產生了距離。為了保持top層與瀏覽器窗口緊挨著,則需對top層的固定定位設置偏移量top:0; 2.第一步對top層設置偏移量后top層緊隨其后的兄弟元素會占據其原來的位置,所以mainbody層上移占據原來top層的位置。導致原來top層與mainbody層20px的間距沒有了。在mainbody層的上外填充加上一定的高度就可以解決了。
    查看全部
  • 在垂直方向上,margin-top值存在重疊----也就是外邊距合并:當兩個垂直外邊距相遇時會發生外邊距合并,合并后的外邊距的高度等于兩個外邊距中較大的外邊距值。這只發生在普通文檔流中的塊級框中,而行框、絕對定位以及浮動則不會出現。所以一般建議在父級元素里加margin,在子級元素里用padding。
    查看全部
  • 什么時候該設置偏移量? 在對元素設置固定定位時,如果希望本元素包含在其父包含塊中,不需要對其設置偏移量。 {position: fixed;}沒有設置偏移量的方向依然會保持在父包含塊。 也就是說: 在其沒有設置偏移量的時候,偏移量參數值默認為當前fixed的元素與瀏覽器可視窗口的偏移數值! 同理,對于{position: absolute;}的元素也是一個道理,沒有設置的偏移量數值默認為當前其相對于最近的有{position: relative;}的祖先元素的偏移數值!
    查看全部
    0 采集 收起 來源:偏移量的設置

    2015-08-25

  • 只有元素在設置相對定位,或者絕對定位后,此屬性才有效,它的作用是設置元素所在的z軸層級。z-index值越大,元素層級越大。
    查看全部
    0 采集 收起 來源:練習題

    2015-08-25

  • absolute 設置偏移量時,偏移參照基準: 1.無已定位祖先元素,以<html>為參照基準 2.有已定位的祖先元素 以距其最近的,已定位的祖先元素為基準偏移。 fixed 設置偏移量時的參照基準 有無已經定位的祖先元素 ,都以瀏覽器可視窗口為基準。 absolute定位:位置會隨滾動條變化 fixed定位:1.位置固定,不會隨滾動條變化 2.被它遮蓋的其他元素,可以從其下穿過(絕對定位的元素在空間上可以產生堆疊,已經脫離標準文檔流)
    查看全部
  • absolute與fixed相同點:(都屬于絕對定位形式) 1.完全脫離標準文檔流 2.未設置偏移量時,都定位在父元素的左上角。 偏移量——元素設置定位(絕對或相對)后,就具有偏移屬性和堆疊屬性(z-index) 不同點: absolute 1,會隨滾動條變化 fixed 1,位置固定,不會隨滾動條變化 2,被他遮蓋的元素,可以從其下穿過
    查看全部
  • 絕對定位特點【absolute與fixed同屬于絕對定位】:完全脫離標準文檔流,兄弟元素不再受其影響
    查看全部
  • position屬性值 static--靜態定位 relative--相對定位 absolute--絕對定位 fixed--固定定位
    查看全部
  • fixed 定位:完全脫離文檔流 特點--位置固定不變 兄弟元素可以從其下穿過 未設置偏移量 有已定位的祖先元素 以祖先元素為基準定位 無已定位的祖先元素 以瀏覽器窗口為基準定位 有設置偏移量時 ,有、無已定位的祖先元素,都是以瀏覽器的窗口作為參照基準 實現頂部固定層: #top---position:fixed ;top:0;left:0; #mainbody---margin-top:(#top高度+原有間距)px
    查看全部
    0 采集 收起 來源:總結

    2015-08-25

  • absolute與fixed相同點:(都屬于絕對定位形式) 1.完全脫離標準文檔流 2.未設置偏移量時,都定位在父元素的左上角。 偏移量——元素設置定位(絕對或相對)后 就具有偏移屬性和堆疊屬性(z-index) 不同點: absolute 1,會隨滾動條變化 fixed 1,位置固定,不會隨滾動條變化 2,被他遮蓋的元素,可以從其下穿過
    查看全部
  • 只有元素在設置相對定位,或者絕對定位后,z-index屬性才有效,它的作用是設置元素所在的z軸層級。z-index值越大,元素層級越大
    查看全部
    0 采集 收起 來源:練習題

    2015-08-23

  • absolute與fixed相同點:(都屬于絕對定位形式) 1.完全脫離標準文檔流 2.未設置偏移量時,都定位在父元素的左上角。 偏移量——元素設置定位(絕對或相對)后 就具有偏移屬性和堆疊屬性(z-index) 不同點: absolute 1,會隨滾動條變化 fixed 1,位置固定,不會隨滾動條變化 2,被他遮蓋的元素,可以從其下穿過
    查看全部
  • fixed頂部固定層實現-關鍵。
    查看全部
    0 采集 收起 來源:總結

    2015-08-23

舉報

0/150
提交
取消
課程須知
1.您需要掌握簡單的html+css相關知識 2.對position定位有簡單的認識
老師告訴你能學到什么?
1.position屬性中絕對定位(absolute)和固定定位(fixed)的區別 2.偏移量的設置 3.固定層效果的如何實現

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!