<template>
<div>
<div class="parent">
<div class="children"></div>
</div>
</div>
</template>
<style>
.parent{
position: fixed;
left: 50px;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.children{
position: fixed;
width: 100%;
height: 100px;
border: 1px solid #ccc;
}
</style>
以上述代码为例:
1、.children不设置top,bottom,left,right属性值,本质上fixed元素还是相当于窗口定位的,但实际效果上是相对于父元素定位。
2、.parent设置transfrom属性,子级的fixed元素会直接降级变成position:absolute。
参考文章:
https://www.cnblogs.com/shimily/articles/11159019.html
https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/