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截取字符串实例代码【推荐】
Jun 07 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 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
eAccelerator的安装与使用详解
2013/06/13 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
node.js入门教程
2014/06/01 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
Python生成验证码实例
2014/08/21 Python
对python:print打印时加u的含义详解
2018/12/15 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python实现宿舍管理系统
2019/11/22 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
2015社区六五普法工作总结
2015/04/21 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python