元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。
以上说的是正常情况。
还有一种特殊情况就是,当使用了fixed定位的元素的父元素使用了transform时,那么(猜测)fixed就会变成absolute定位,效果确实是这样的。
以下代码以供检验:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed 位置偏移的问题</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father {
width: 100vw;
height: 100vh;
background-color: red;
/* 父元素使用 transform ,把下面这行注释掉 fixed 就没问题了 */
transform: translate(25%, 25%);
/* margin: 25% 0 0 25%; */ /* 使用 margin 改变父元素的位置则不会影响 fixed 定位的效果 */
}
.child {
width: 50vw;
height: 50vh;
background-color: green;
position: fixed;
left: 25%;
top: 25%;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>