项目中遇到的小问题，position:fixed无效的一种情况

程序员文章站 2022-04-25 11:38:15

...

今天遇到一个定位的问题,要让元素定位在浏览器的顶部，使用position: fixed居然没有效果，元素依然跟着浏览器滚动条走动，后来发现他的上层元素有的使用了transform: translate(0, 0);导致position: fixed功能失效了。所以特此记下来，当做一次小坑吧。

我写了一个例子，如下：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position:fixed无效</title>
<style>
body {
	height: 20000px;
	transform: translate(0, 0);
}
.box {
	position: fixed;
	width: 100px;
	height: 100px;
	background: red;
	top: 300px;
}
 
</style>
</head>
<body>
<div class="box">固定定位元素</div>
</body>
</html>

正常这个.box不会跟随浏览器滚动，但这里会，所以感觉position：fixed 没起作用

解决办法：

当我们对上级元素设置transform: none;或者display：inline，就能解决这样的问题。

参考文献：CSS3 transform对普通元素的N多渲染影响