css3 transform致使子元素固定不动精准定位变为肯定

日期：2021-02-28 类型：科技新闻 

关键词：商城网站建设，微商好助手，微商引流，电商网站模板，微信商家小程序

 本文详细介绍了css3 transform致使子元素固定不动精准定位变为肯定精准定位的方式，共享给大伙儿，也给我自身留个笔记，便捷搜索。

<!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>

难题相对沒有遇到过的同学不太非常容易搜索缘故。贴个图看下实际效果（仅有翠绿色一部分有蒙层，但大家将会认为自身的写法沒有难题。）

实际上大家要想的子元素全屏实际效果，必须设定transform: none；

难题较为典型：父级元素设定合理的transform特性会致使子元素固定不动变为肯定元素， 此时会致使子元素和父级元素同样尺寸. 此时查询子元素的offsetTop和offsetLeft全是0，必须引发留意。
出現情景： 一般会在架构UI的基本上自定提升款式情况下出現。

 到此这篇有关css3 transform致使子元素固定不动精准定位变为肯定精准定位的方式的文章内容就详细介绍到这了,更多有关css3 transform 子元素固定不动內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：canvas完成照片马赛克的示例编码 返回下一篇：没有了