CSS固定定位陷阱

khs1994 發布于2019-08-30 15:52 / 1382人閱讀

摘要：在日常開發中，經常使用固定定位，使得元素相對于屏幕視口定位，常常用在頭部側邊抽屜菜單等。但當它的祖級元素的屬性有非值時，固定定位不再相對于視口定位，而是相對于該祖級元素定位。這也正是固定定位不符合預期的原因。

在日常開發中，經常使用固定定位position:fixed，使得元素相對于屏幕視口定位，常常用在頭部、側邊抽屜菜單、FAB等。固定定位的元素，不會隨窗口滾動而移動，與父元素的位置無關，但真的是這樣嗎？

假設頁面上有一些固定定位元素，如

和，讓我們在body的樣式中添加一句代碼transform: translate(30px,30px)：

// html



// css
body {transform: translate(30px,30px)}
header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 68px;
  background: #2196F3;
}
menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 240px;
  background: #F39621;
}

固定定位失效

發現了嗎，固定定位的元素發生了偏移，它們不再是相對于屏幕視口進行定位，而且menu元素直接從視圖上消失了。再來看一個例子：

// html

  /div>


// css
.container{
  width: 200px;
  height: 200px;
  background: #6699FF;
  animation: move 4s cubic-bezier(0.4,0,0.6,1) infinite;
}
.fix{
  position: fixed;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  background: #9966FF;
  color:#FFF;
}
@keyframes move{
  0% {transform:translateX(100px);}
  50% {transform:translateX(500px);}
  100% {transform:translateX(100px);}
}

固定定位不固定

固定定位的元素竟然動了起來，究竟發生了什么？

固定定位定義

fixed: Do not leave space for the element. Instead, position it at a specified position relative to the screen"s viewport and don"t move it when scrolled. When printing, position it at that fixed position on every page. This value always creates a new stacking context. When an ancestor has the transform property set to something different from none then this ancestor is used as container instead of the viewport

簡而言之，一般情況下，固定定位是相對于視口定位的。但當它的祖級元素的transform屬性有非none值時，固定定位不再相對于視口定位，而是相對于該祖級元素定位。這也正是固定定位不符合預期的原因。

結合上面的例子：body元素添加transform: translate(30px,30px)后，

和元素的變成了相對于body進行定位，因此，這兩倆都發生偏移。而body的高度為0，因為是上下定位，所以它的高度也變為了0，所以直接"消失"了。

在第二個例子中，container元素添加了transform動畫，使得內部的所有元素也隨它一起運動。

遠離陷阱

日常開發，尤其是在組件開發中，盡量將固定定位的元素掛載到document.body下，我們很少會為body添加變換樣式。在開發具有彈框的組件，如Modal、Dialog等組件時，你無法確定其祖級元素是否會有變換樣式，因此，彈框元素掛載在document.body下才是最萬無一失的選擇。

GPU云服務器云服務器面試陷阱創業陷阱陷阱清單陷阱

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

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

自我總結CSS中的陷阱（長期更新）

摘要：低版本萬惡的不支持通過解決，或者是。不支持動畫屬性通過解決下雙倍邊距問題通過解決。簡單的解決方案時為相對定位的框設置寬度和高度。不能寫進一個聲明中。低版本IE bug 萬惡的IE6/7 IE6 position:fixed不支持：通過css expression解決，或者是_position:absolute。 * html, * html body { bac...

iliyaku 2019-08-28 18:08 評論0 收藏0
拒信收割機の前端面經（CVTE，唯品會，百度）

摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...

yzd 2019-08-29 11:23 評論0 收藏0
拒信收割機の前端面經（CVTE，唯品會，百度）

摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...

channg 2019-08-20 11:22 評論0 收藏0
拒信收割機の前端面經（CVTE，唯品會，百度）

摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...

BlackHole1 2019-08-01 15:46 評論0 收藏0