整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          記錄CSS中 position-fixed 踩的坑

          記錄CSS中 position:fixed 踩的坑

          html 頁面的css樣式中,如果將 position 屬性的值設置為 fixed,那就表示其元素的位置相當于顯示設備的可視區域進行定位,而今天在調試此屬性時,卻發生了一件奇怪的事件。

          position:fixed 定位失效情況復現

          失效代碼:

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <title>Document</title>
          </head>
          <style>
           body{
           height: 150%;
           width: 100%;
           transform: translate(0, 0);
           }
           div{
           position: fixed;
           left: 50%;
           top: 50%;
           width: 100px;
           height: 200px;
           margin: -100px 0 0 -50px;
           background-color: brown;
           }
          </style>
          <body>
           <div></div>
          </body>
          </html>
          

          代碼動行結果:

          注意:

          1、代碼的樣式是規定DIV元素模塊,在瀏覽器的可視窗口中,上下左右居中

          2、實際的顯示效果,DIV模塊已經向上偏移

          position:fixed 定位問題解決方法

          通過排查代碼,可以發現,在 body 樣式屬性中,有個 transform: translate(0, 0) 屬性,去掉此屬性后,position:fixed 定位問題解決

          修復后的代碼

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <title>Document</title>
          </head>
          <style>
           body{
           height: 150%;
           width: 100%;
           }
           div{
           position: fixed;
           left: 50%;
           top: 50%;
           width: 100px;
           height: 200px;
           margin: -100px 0 0 -50px;
           background-color: brown;
           }
          </style>
          <body>
           <div></div>
          </body>
          </html>
          

          代碼運行結果:

          position:fixed 定位出錯的原因

          關于此問題的出現,牽涉到了 Stacking Context(堆疊上下文的概念)。

          堆疊上下文,是 HTML 元素的三維概念,這些 HTML 元素在一條假想的相對于面向(電腦屏幕的)視窗或者網頁的用戶的 z 軸上延伸,HTML 元素依據其自身屬性按照優先級順序占用層疊上下文的空間。

          1、任何非 none 的 transform 值都會導致一個堆疊上下文(Stacking Context)和包含塊(Containing Block)的創建。

          2、由于堆疊上下文的創建,該元素會影響其子元素的固定定位。設置了 position:fixed 的子元素將不會基于 可視窗口定位,而是基于這個父元素。

          是摘抄自MDN中對于css屬性position的定義:

          CSS position屬性用于指定一個元素在文檔中的定位方式。top,right,bottom 和 left 屬性則決定了該元素的最終位置

          在日常編寫html開發時,我總想有一只魔法棒該多好啊,只要一揮手,頁面上所有元素都能放在我想要放的位置。可是愿望很美好,現實很殘酷,不但殘酷,還有個別不聽話的元素經常跟我們作對。

          新需求來了

          領導找到我說,我的產品要有這樣一個功能,在瀏覽器的最底端始終顯示我們公司軟件的下載按鈕,快去做!

          拿到需求后心想,這還不簡單,這次分分鐘中給你搞定。于是我這樣寫下

          很完美的實現


          然后信心滿滿的拿著我的杰作給產品經理看

          杰作

          領導看完直說,小伙子不錯嗎,這么快就完成了,看好你哦。得到領導的夸獎別說多興奮了 。

          。。。

          可是好景不長,半夜里領導突然打電話說,有客戶投訴了,說咱么這是什么破產品,一個下載按鈕不在底下好好呆著,亂跑!

          無法控制的絕對定位


          吃了領導一頓劈頭蓋臉的批評,掛了電話,我陷入了深深的沉思。。我到底哪里做錯了,明明用的absolute絕對定位,怎么會出現這種情況呢。

          哎,學藝不精又能怪誰呢,問題出現了,現在最重要的是怎么快速解決吧

          fixed出場

          眾里尋他千百度,慕然回首,你在mdn處。

          原來css中絕對定位不只是absolute,還有一種叫做fixed的選項,MDN中這樣說明的

          fixed:元素會被移出正常文檔流,并不為元素預留空間,而是通過指定元素相對于屏幕視口(viewport)的位置來指定元素位置。元素的位置在屏幕滾動時不會改變

          相對于屏幕視口(viewport)的位置來指定元素位置,元素的位置在屏幕滾動時不會改變

          一語驚醒夢中人啊,我那個absolute就是被滾動條滾動上去的啊,好想說一句MD.

          于是我將我的absolute改成了fixed,終于解決了問題

          同為絕對定位,區別在于哪里呢

          absolute的位置是相對于整個頁面,就像拿一個圖釘把它定在了頁面,頁面滾動元素也會跟著滾動。

          而fixed定位呢,是相對于屏幕視口(viewport),即相對于我們肉眼看到的頁面屏幕,即使頁面滾動,我們的視口是不改變的,所以我們看到的元素就是不動的。

          ps:文中的MDN是我經常學習的網站,著名瀏覽器Fixfox出品

          定定位(1)給自身設置寬高(2)設置position:fixed(3)底部元素內頂邊距


          主站蜘蛛池模板: 亚洲爆乳精品无码一区二区三区| 亚洲AV美女一区二区三区| 精品国产免费观看一区 | 亚洲狠狠狠一区二区三区| 深夜福利一区二区| 精品国产aⅴ无码一区二区| 日本大香伊一区二区三区| 国产一区二区三区在线| 日韩在线视频一区二区三区| 中文字幕AV一区二区三区人妻少妇| 无码人妻精品一区二区在线视频| 精品一区二区三区免费视频| 日韩一区二区三区在线精品| 国产成人无码aa精品一区| 夜精品a一区二区三区| 色欲AV蜜桃一区二区三| 人妻夜夜爽天天爽一区| 中文字幕乱码亚洲精品一区 | 国产探花在线精品一区二区| 久久精品国产一区二区三区不卡 | 日本高清不卡一区| 亚洲日韩精品无码一区二区三区 | 亚洲av无码一区二区三区天堂古代| 无码一区二区三区视频| 亚洲av无码不卡一区二区三区| 亚洲国产成人一区二区三区| 久久se精品一区二区国产| 亚洲一区在线免费观看| 日韩欧美一区二区三区免费观看 | 久久久久久综合一区中文字幕| 国产一区二区三区高清在线观看| 国产午夜毛片一区二区三区| 亚洲一区影音先锋色资源| 人妻无码视频一区二区三区| 成人国产精品一区二区网站公司| 国产一区二区三区在线免费观看| 四虎一区二区成人免费影院网址 | 一区二区在线电影| 亚无码乱人伦一区二区| 一区二区三区四区在线播放| 国产凹凸在线一区二区|