設(shè)置了transform的父盒子不要包含fixed定位的子元素,以免出現(xiàn)奇怪的問題
示例代碼:
<!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本應(yīng)相對(duì)于窗口定位在右上角,如今卻定位在了父元素的右上角,還會(huì)隨頁面滾動(dòng)而滾動(dòng)
如果我們?nèi)サ舾负凶拥?code>transform: translateY(10px);,定位就又恢復(fù)到我們熟悉的位置啦

Paste_Image.png
開發(fā)中遇到的小坑~在此記錄一下以便下次查找