整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html 頁面的css樣式中，如果將 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模塊已經向上偏移
通過排查代碼，可以發現，在 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>
代碼運行結果：
關于此問題的出現，牽涉到了 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絕對定位，怎么會出現這種情況呢。
哎，學藝不精又能怪誰呢，問題出現了，現在最重要的是怎么快速解決吧
眾里尋他千百度，慕然回首，你在mdn處。
原來css中絕對定位不只是absolute，還有一種叫做fixed的選項,MDN中這樣說明的
fixed:元素會被移出正常文檔流，并不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變
相對于屏幕視口（viewport）的位置來指定元素位置,元素的位置在屏幕滾動時不會改變
一語驚醒夢中人啊，我那個absolute就是被滾動條滾動上去的啊，好想說一句MD.
于是我將我的absolute改成了fixed，終于解決了問題
absolute的位置是相對于整個頁面，就像拿一個圖釘把它定在了頁面，頁面滾動元素也會跟著滾動。
而fixed定位呢，是相對于屏幕視口（viewport)，即相對于我們肉眼看到的頁面屏幕，即使頁面滾動，我們的視口是不改變的，所以我們看到的元素就是不動的。
ps:文中的MDN是我經常學習的網站，著名瀏覽器Fixfox出品
定定位（1）給自身設置寬高（2）再設置position:fixed（3）底部元素內頂邊距
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
