css3 transform导致子元素固定定位变成绝对定位的方法


Posted in HTML / CSS onMarch 06, 2020

 本文介绍了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>

问题相对于没有遇到过的同学不太容易查找原因。贴个图看下效果(只有绿色部分有蒙层,但我们可能以为自己的写法没有问题。)

css3 transform导致子元素固定定位变成绝对定位的方法

其实我们想要的子元素全屏效果,需要设置transform: none;

css3 transform导致子元素固定定位变成绝对定位的方法

问题比较典型:父级元素设置有效的transform属性会导致子元素固定变成绝对元素, 此时会导致子元素和父级元素相同大小. 此时查看子元素的offsetTop和offsetLeft都是0,需要引起注意。
出现场景: 通常会在框架UI的基础上自定义增加样式时候出现。

 到此这篇关于css3 transform导致子元素固定定位变成绝对定位的方法的文章就介绍到这了,更多相关css3 transform 子元素固定内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 #HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 #HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 #HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 #HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 #HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 #HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 #HTML / CSS
You might like
深入PHP异步执行的详解
2013/06/03 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python图像处理之反色实现方法
2015/05/30 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
Keras自定义IOU方式
2020/06/10 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
C# .NET面试题
2015/11/28 面试题
保险专业大专生求职信
2013/10/26 职场文书
策划主管的工作职责
2013/11/24 职场文书
自荐书格式
2013/12/01 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
四下基层实施方案
2014/03/28 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
地道战观后感
2015/06/04 职场文书
学习心得体会
2019/06/20 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
学会Python数据可视化必须尝试这7个库
2021/06/16 Python