亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS固定定位陷阱

khs1994 / 1447人閱讀

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

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

假設(shè)頁面上有一些固定定位元素，如

和，讓我們在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;
}

固定定位失效

發(fā)現(xiàn)了嗎，固定定位的元素發(fā)生了偏移，它們不再是相對于屏幕視口進行定位，而且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);}
}

固定定位不固定

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

固定定位定義 
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值時，固定定位不再相對于視口定位，而是相對于該祖級元素定位。這也正是固定定位不符合預(yù)期的原因。

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

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

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

遠離陷阱

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116489.html

相關(guān)文章

  • 自我總結(jié)CSS中的陷阱（長期更新）

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

    iliyaku 評論0 收藏0

  • 拒信收割機の前端面經(jīng)（CVTE，唯品會，百度）

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

    yzd 評論0 收藏0

  • 拒信收割機の前端面經(jīng)（CVTE，唯品會，百度）

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

    channg 評論0 收藏0

  • 拒信收割機の前端面經(jīng)（CVTE，唯品會，百度）

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

    BlackHole1 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<