介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt; style>
,,body {
,,,背景:,#法郎;,//,橙色
,,}
.parent {才能
,,,,位置:,固定;
,,,,宽度:,300 px;
,,,,身高:,300 px;
,,,,对的:,0;
,,,,:,0;
,,,,背景:,# 02 bd00;,,//,绿色
,,,,变换:,translateX (0),,,,,,,,,,,,,,,,,,
,,}
.child {才能
,,,,位置:,固定;
,,,,左:,0;
,,,,对的:,0;
,,,,:,0;
,,,,底部:,0;,,,,
,,,,背景:,rgba(0, 0, 0, 0.2);,//,黑色透明:蒙层
,,}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=皃arent"祝辞
& lt;才能div 类=癱hild"祝辞& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
这篇文章主要介绍css3中变换导致子元素固定定位变成绝对定位的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
css3转换导致子元素固定定位变成绝对定位的方法
问题相对于没有遇到过的同学不太容易查找原因。贴个图看下效果(只有绿色部分有蒙层,但我们可能以为自己的写法没有问题。)
其实我们想要的子元素全屏效果,需要设置变换:没有。
问题比较典型:父级元素设置有效的变换属性会导致子元素固定变成绝对元素,此时会导致子元素和父级元素相同大小。此时查看子元素的offsetTop和offsetLeft都是0,需要引起注意。
出现场景:通常会在框架UI的基础上自定义增加样式时候出现。
以上是“css3中变换导致子元素固定定位变成绝对定位的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
