问题复现：我使用子绝父相的定位方法后，里面嵌套的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多渲染影响
转载请注明出处，觉得不错请点赞！！！
网友评论