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实现的几个小loading效果
Sep 27 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
详解px单位html5响应式方案
Mar 08 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
致200米运动员广播稿
2014/02/06 职场文书
检查接待方案
2014/02/27 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
先进员工事迹材料
2014/12/20 职场文书
政协常委会议主持词
2015/07/03 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
Python PIL按比例裁剪图片
2022/05/11 Python