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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 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
Banner程序
2006/10/09 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
Python探索之pLSA实现代码
2017/10/25 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
教师学习培训邀请函
2014/02/04 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
党风廉政建设责任书
2014/04/14 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2014年教师节寄语
2014/08/11 职场文书