css3 transform導(dǎo)致子元素固定定位變成絕對(duì)定位的方法

發(fā)布時(shí)間：2020-03-06 16:30:15 作者：伴伴

這篇文章主要介紹了css3 transform導(dǎo)致子元素固定定位變成絕對(duì)定位的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文介紹了css3 transform導(dǎo)致子元素固定定位變成絕對(duì)定位的方法，分享給大家，也給我自己留個(gè)筆記，方便查找。

<!DOCTYPE html>
<html>
<head>
<style>
   body {
    background: #f60; // 橙色
   }
  .parent {
     position: fixed;
     width: 300px;
     height: 300px;
     right: 0;
     top: 0;
     background: #02bd00;  // 綠色
     transform: translateX(0);                 
  }
  .child {
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;    
     background: rgba(0,0,0,0.2); // 黑色透明：蒙層
  }
</style>
</head>
<body>

<div class="parent">
  <div class="child"></div>
</div>

</body>
</html>

問題相對(duì)于沒有遇到過的同學(xué)不太容易查找原因。貼個(gè)圖看下效果（只有綠色部分有蒙層，但我們可能以為自己的寫法沒有問題。）

其實(shí)我們想要的子元素全屏效果，需要設(shè)置transform: none；

問題比較典型：父級(jí)元素設(shè)置有效的transform屬性會(huì)導(dǎo)致子元素固定變成絕對(duì)元素，此時(shí)會(huì)導(dǎo)致子元素和父級(jí)元素相同大小. 此時(shí)查看子元素的offsetTop和offsetLeft都是0，需要引起注意。
出現(xiàn)場(chǎng)景：通常會(huì)在框架UI的基礎(chǔ)上自定義增加樣式時(shí)候出現(xiàn)。

到此這篇關(guān)于css3 transform導(dǎo)致子元素固定定位變成絕對(duì)定位的方法的文章就介紹到這了,更多相關(guān)css3 transform 子元素固定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！