fixed固定定位定位元素的層級和float層級的區別遮蓋效果

DobbyKim 發布于2019-08-29 18:35 / 2731人閱讀

摘要：講固定定位固定定位與上一講的絕對定位很相似，不同點是固定定位永遠是瀏覽器窗口左上角不會隨著滾軸滾動，常用來做廣告講元素的層級相對定位沒有脫離文檔流，但是會靈魂出竅進行元素遮蓋。

71講固定定位

固定定位與上一講的絕對定位很相似，不同點是：

固定定位永遠是瀏覽器窗口左上角

不會隨著滾軸滾動，常用來做廣告

72講元素的層級

相對定位沒有脫離文檔流，但是會靈魂出竅進行元素遮蓋。絕對定位脫離了文檔流，也能實現遮蓋。另外float也會脫離文檔流實現某種意義上的遮蓋。當這三個遇到一塊會出現什么情況？

層級z-index

只有設置了position才可以使用z-index(position:static除外)進行層級的設置，默認層級是0

父元素的層級再高也不會蓋住子元素



層級

關于float層級

div1絕對定位會脫離文檔流position:absolute，那么此時我設置div2為float:left會出現什么效果呢？發現設置了position:absolute后也會把float進行遮蓋，并不會出現兩個元素水平排列



導航條

遮蓋與總結

如果要實現遮蓋效果 position:absolute，應該是首先會想到的

設置了position屬性后會有專屬的屬性出現:left top bottom right z-index其他元素不可以使用~~!

云服務器 GPU云服務器 vps的層級時間服務器的層級 js 無限層級的樹狀元素定位

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

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

fixed固定定位定位元素的層級和float層級的區別遮蓋效果

摘要：講固定定位固定定位與上一講的絕對定位很相似，不同點是固定定位永遠是瀏覽器窗口左上角不會隨著滾軸滾動，常用來做廣告講元素的層級相對定位沒有脫離文檔流，但是會靈魂出竅進行元素遮蓋。 71講固定定位固定定位與上一講的絕對定位很相似，不同點是：固定定位永遠是瀏覽器窗口左上角不會隨著滾軸滾動，常用來做廣告 72講元素的層級相對定位沒有脫離文檔流，但是會靈魂出竅進行元素遮蓋。絕對定...

superw 2019-08-02 16:12 評論0 收藏0
CSS原生布局方式

摘要：布局任何元素在默認的情況下都是處于整個文檔流中的，不會浮動的。相對定位如果想為元素設置層級布局模型中的相對定位，需要設置表示相對定位，它通過屬性確定元素在正常文檔流中的偏移位置。 showImg(https://segmentfault.com/img/remote/1460000009753577); 前言網頁原生布局的方法其實網上有很多，大概為Flow（流動布局模型）、Float...

PingCAP 2019-08-20 17:14 評論0 收藏0
web前端（12）—— 頁面布局2

摘要：是以首屏頁面左下角為參考點來調整位置。因為絕對定位脫離標準流，影響頁面的布局。相反父相子絕在我們頁面布局中，是常用的布局方案。本篇博文，主要就講定位的問題，也就是頁面布局里最重要的，本篇博文不出意外的話，也是css的最后一篇博文了定位，position屬性定位有三種：相對定位絕對定位固定定位相對定位，position：relative 相對定位的意思就是相對于自身元素原來...

番茄西紅柿 2019-04-23 13:11 評論0 收藏0
前端筆記之CSS（下）浮動&BFC&定位&Hack

摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。一、浮動 1.1 各個語言的主要知識點 HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯) CSS：　　樣式：　　布局：　　　　標準流(標準文檔流、普通文檔流)：盒子模型(width/height...

番茄西紅柿 2019-04-23 11:44 評論0 收藏0