问题背景
在一次写大屏需求的时候需要动态计算弹框相对于浏览器窗口的位置 然后用fixed定位显示；这个弹框的父级有个盒子，这个盒子的css属性有transform: scale(0.7)的属性，所有的计算都是正确的当时位置就是不对，fixed定位会相对于他的父级盒子定位
复现代码
正常的定位
<!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>
.demo1 {
width: 200px;
height: 200px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
}
.demo2 {
width: 100px;
height: 100px;
background-color: aqua;
position: fixed;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="demo1">
<div class="demo2"></div>
</div>
</body>
</html>
父级加上transform
<!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>
.demo1 {
width: 200px;
height: 200px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: scale(1.2);
}
.demo2 {
width: 100px;
height: 100px;
background-color: aqua;
position: fixed;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="demo1">
<div class="demo2"></div>
</div>
</body>
</html>
问题解析
w3c对transform解释
看解释transform属性的元素会创建一个包含块 这个块具有独立的坐标系 所以fiexd定位会相对于父元素进行定位
w3c对transform的其它解释
