成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS固定定位陷阱

khs1994 / 1396人閱讀

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

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

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

和，讓我們?cè)赽ody的樣式中添加一句代碼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ā)生了偏移，它們不再是相對(duì)于屏幕視口進(jìn)行定位，而且menu元素直接從視圖上消失了。再來看一個(gè)例子：

// 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);}
}

固定定位不固定

固定定位的元素竟然動(dòng)了起來，究竟發(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

簡(jiǎn)而言之，一般情況下，固定定位是相對(duì)于視口定位的。但當(dāng)它的祖級(jí)元素的transform屬性有非none值時(shí)，固定定位不再相對(duì)于視口定位，而是相對(duì)于該祖級(jí)元素定位。這也正是固定定位不符合預(yù)期的原因。

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

和元素的變成了相對(duì)于body進(jìn)行定位，因此，這兩倆都發(fā)生偏移。而body的高度為0，因?yàn)槭巧舷露ㄎ?，所以它的高度也變?yōu)榱?，所以直接"消失"了。

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

遠(yuǎn)離陷阱

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116489.html

相關(guān)文章

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

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

    iliyaku 評(píng)論0 收藏0

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

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

    yzd 評(píng)論0 收藏0

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

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

    channg 評(píng)論0 收藏0

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

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

    BlackHole1 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<