问题复现:我使用子绝父相的定位方法后,里面嵌套的el-dialog出现了显示问题;
起因:在一个div中嵌套了组件, 组件是一个el-dialog,正常操作是触发某事件,显示dialog弹框,这个逻辑没问题。
开发工具:Vue,Element,
业务需求:目前要求是将div根据他的父级进行垂直居中。
思路: 直接给div设置一个样式
<html>
<div class="dad">
<div class="son"></div>
</div>
</html>
<css>
.dad{position: relative;width: 200px;height: 200px;background: pink;}
.son{position: absolute;left: 50%; top: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: yellow;}
</css>
以上是我个人常用的方法,但是万万没想到,就这个小小的几行代码, 就出现了上面的问题,
解决方法:
控制台元素审查找原因, 依次去除css上的样式,试用其他的居中方法实现该功能
上例子 (元素居中定位)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style lang="css">
*{margin:0 auto;padding: 0;}
html, body{width: 100%;height: 100%;}
.dad{position: relative;width: 200px;height: 200px;margin-top: 300px;background: pink;}
.son{position: absolute;left: 50%; top: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: yellow;}
.dialog{position: fixed;top: 0; bottom: 0;left: 0;right: 0; background: rgba(148, 67, 29, 0.5);}
</style>
</head>
<body>
<div class="dad">
<div class="son"></div>
</div>
<div class="dialog"></div>
</body>
</html>
效果图
0880c08b0110d9839e09.jpg
这里我们看到显示的效果是没有问题,弹框也是正常的 接下来我们复现下上面提到的问题
注意问题来了
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style lang="css">
*{margin:0 auto;padding: 0;}
html, body{width: 100%;height: 100%;}
.dad{position: relative;width: 200px;height: 200px;margin-top: 300px;background: pink;}
.son{position: absolute;left: 50%; top: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background: yellow;}
.dialog{position: fixed;top: 0; bottom: 0;left: 0;right: 0; background: rgba(148, 67, 29, 0.5);}
</style>
</head>
<body>
<div class="dad">
<div class="son">
<div class="dialog"></div>
</div>
</div>
</body>
</html>
效果图
0880c08b0110d9c38b0e.jpg
哎,我们惊奇的发现,dialog居然跟son一样大小,这个是为啥?
那么咱们来区分下两个例子的区别
css都是一样的,
第一个例子,dad跟dialog是同级,
第二个例子,将dialog放置在了son的下面
接下来我们排查下问题,发现居然是transform的问题,
解答: fixed定位的元素如果他的父级及以上有transform属性的话, 那么fixed属性就相当于转换成了absolute
也就是说if(transform) {fixed = absolute};
所以。在上述情况下, 会出现跟son一样大小, 因为dialog是基于son来做定位的,所以重叠到一起了;
查看了一些文章,突然发现transform不仅对fixed有影响,还对其他的属性存在影响,
具体内容请看张大神的文章
CSS3 transform对普通元素的N多渲染影响
转载请注明出处,觉得不错请点赞!!!
网友评论