mdn上关于这个属性的介绍是这样的
不为元素预留空间，而是通过指定圆度相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变
当元素祖先的transform属性非none时，容器有视口改为改祖先
例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 200px;height: 200px;margin: 100px;background:#ddd;}
a{position: fixed;left:0;top: 0;}
</style>
</head>
<body>
<div>
<a href="">123</a>
</div>
</body>
</html>
现在a标签是相对于viewport来计算位置的
例子2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 200px;height: 200px;margin: 100px;background:#ddd;transform: scale(1);}
a{position: fixed;left:0;top: 0;}
</style>
</head>
<body>
<div>
<a href="">123</a>
</div>
</body>
</html>
现在a标签是相对于这个div来计算位置
经过试验：will-change在指定css属性也和transform会有同样的效果
网友评论