fixed布局相对于父级容器定位问题及transform影响

最新推荐文章于 2025-06-10 16:06:13 发布

原创最新推荐文章于 2025-06-10 16:06:13 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

<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/