整合營銷服務商

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

          免費咨詢熱線:

          記錄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永久无码一区二区三区| 久久久精品一区二区三区| AV怡红院一区二区三区| 国产成人一区二区动漫精品 | 黑人一区二区三区中文字幕| 国产精品一区二区久久| 精品亚洲AV无码一区二区| 蜜臀Av午夜一区二区三区| 日本一区二区三区精品中文字幕| 国产激情无码一区二区三区| 97久久精品一区二区三区| 精品日产一区二区三区手机| 亚洲日韩精品无码一区二区三区| 丝袜无码一区二区三区| 国产一区视频在线| 亚州日本乱码一区二区三区 | 波多野结衣一区二区三区高清在线| 亚洲综合一区二区三区四区五区| 色综合视频一区二区三区44| 亚洲av成人一区二区三区在线播放| 亚洲第一区二区快射影院| 久久久久人妻精品一区三寸| 国产精品一区二区综合| 亚洲第一区在线观看| 中文国产成人精品久久一区| 国产一区二区三区高清在线观看| 国产精品无圣光一区二区| 中文字幕在线一区二区在线 | 最美女人体内射精一区二区| 免费无码一区二区三区| 无码中文人妻在线一区二区三区| 国产在线第一区二区三区| 国产成人综合精品一区| 无码少妇一区二区|