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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
CSS的class与id常用的命名规则
May 18 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php基础学习之变量的使用
2011/06/09 PHP
php中关于换行的实例写法
2019/09/26 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
Python操作串口的方法
2015/06/17 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python算法之图的遍历
2017/11/16 Python
Python自定义线程类简单示例
2018/03/23 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
SQL Server笔试题
2012/01/10 面试题
大学生标准推荐信范文
2013/11/25 职场文书
大二自我鉴定
2014/01/31 职场文书
阳光体育活动方案
2014/02/16 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python