设置了transform的父盒子不要包含fixed定位的子元素，以免出现奇怪的问题
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
transform: translateY(10px);
border: 1px solid red;
width: 320px;
height: 320px;
margin: 100px auto;
}
.fixed {
position: fixed;
width: 32px;
height: 32px;
background: red;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box">
<span class="fixed"></span>
</div>
</body>
</html>
效果：
Paste_Image.png
如图，fixed定位的span本应相对于窗口定位在右上角，如今却定位在了父元素的右上角，还会随页面滚动而滚动
如果我们去掉父盒子的transform: translateY(10px);,定位就又恢复到我们熟悉的位置啦
Paste_Image.png
开发中遇到的小坑~在此记录一下以便下次查找
网友评论