中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

論前端制作中position:fixed屬性的有效范圍

2023-02-27    分類: 網站建設

前端制作
程序員應該都知道position的用法,Position 可能取的值有 absolute、fixed、relative、static和inherit。
position屬性規定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
當值為 absolute 時:生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
當值為 fixed時:生成絕對定位的元素,相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
當值為 relative時:生成相對定位的元素,相對于其正常位置進行定位。因此,"left:20" 會向元素的 LEFT 位置添加 20 像素。
當值為 static時:默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
當值為 inherit時:規定應該從父元素繼承 position 屬性的值。
然而最近我在做一個一屏式的前端項目的時候發現position:fixed 這個屬性失效了,或者說它的屬性所表現出來的效果相當于position:absolute,一開始我以為是有什么同名類名的樣式影響到了,然而審查元素發現不是這個原因,隨后我請教了一下前輩,前輩說可能是它的父級有什么樣式影響到了這個屬性,在我認為position:fixed這個屬性是很絕對的,就像上面所說的當值為 fixed時:生成絕對定位的元素,相對于瀏覽器窗口進行定位。既然是相對于瀏覽器窗口定位,那應該沒什么屬性能影響到吧,而且在平時的項目應用中也確實發現這個屬性很具有獨立性,不受其他屬性影響,但是在這個項目中卻沒有表現出它應有的效果,這是為什么呢?
經過多方排查,原來是因為做這個一屏式的前端頁面的時候用的fullpage.js 會給最外圍的div 添加一個 transform: translate3d(0px, 0px, 0px); 屬性,而正是這個屬性導致了position:fixed 的屬性失效了,從而表現出了position:absolute的效果。
當然,有人會說那應該沒關系吧,反正在一屏式的頁面中,定的位置是一樣的,沒什么區別啊,在正常的一屏式頁面中確實沒什么差別,一屏式頁面本身就是瀏覽器窗口的大小,在這個區域內position:fixed和position:absolute這兩個屬性其實沒什么區別吧。然而我這里做的是一屏式的響應式,而且在移動端的時候要取消一屏式的效果,讓每一屏的頁面內容不再局限在一屏的范圍內,需要可以調控內容區域的高度(這里我之前也有寫過),在這樣的前提下,上訴的問題就出來了,我定位在當前區域的position:fixed不再根據瀏覽器窗口定位了,而是根據body來定位了,也就得不到我想要的效果了,排查出是transform: translate3d這個屬性影響的,當我通過css強制更改這個屬性的值為默認值的時候,position:fixed表現出了它應有的效果,由此我得出了position:fixed在父級有使用transform: translate3d屬性的時候會失效的結論,至于是否還有其他屬性影響到position:fixed的效果,那就需要在實踐中去體驗了。

本文標題:論前端制作中position:fixed屬性的有效范圍
分享URL:http://www.2m8n56k.cn/news2/240202.html

成都網站建設公司_創新互聯,為您提供Google搜索引擎優化網站設計服務器托管品牌網站制作標簽優化

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:[email protected]。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都網頁設計公司
主站蜘蛛池模板: 亚洲免费视频一区二区三区 | 国产免费爽爽视频免费可以看 | 真正全免费视频a毛片 | 影院成人区精品一区二区婷婷丽春院影视 | 欧美一级毛片在线一看 | 欧美自拍另类 | 在线观看中文字幕亚洲 | 国产成人精品日本亚洲专一区 | 欧美视频xxxxx| 视频一区免费 | 亚洲天堂.com| 亚洲国产精品成人午夜在线观看 | 美女被爆免费视频软件 | 99精品欧美一区二区三区 | 亚洲高清视频在线播放 | 午夜爽爽爽男女免费观看hd | 99成人在线视频 | 欧美成人视 | 日韩欧美视频在线播放 | 窝窝社区在线观看www | 欧美高清一级片 | 国产人成免费视频 | 亚洲高清在线观看 | 成人性色大片 | 国产精品久久在线观看 | 成人在线手机视频 | 香蕉久久精品国产 | 亚洲欧美成人综合在线 | 特级aa一级欧美毛片 | 久久精品成人欧美大片免费 | 国产精品一国产精品 | 久久综合久久自在自线精品自 | 波多野结衣在线观看一区二区 | 久久久久久免费视频 | 精品国产成人系列 | 韩日黄色片 | 日韩精品欧美激情国产一区 | 亚洲a级片在线观看 | 午夜免费一级片 | 欧美精品免费看 | 高清国产一区二区三区 |