transform父元素对fixed子元素的影响

最新推荐文章于 2024-05-02 18:59:18 发布

原创最新推荐文章于 2024-05-02 18:59:18 发布 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

17 篇文章

订阅专栏

本文探讨了在应用transform属性的父元素中，fixed子元素的定位问题。通过实例对比，展示了父元素transform如何影响子元素的fixed定位，以及在不同浏览器下的表现差异。

在应用了属性transform的父元素上，若其拥有fixed属性的子元素，则该子元素的fixed属性讲失效，并将以其父元素为定位基准

详情请看例子：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style>
	.outer {
	  overflow: hidden;
	  width: 300px;
	  height: 300px;
	  background: yellow;
	}
	.mid {
	  margin: 20px;
	  width: 200px;
	  height: 200px;
	  transform: translate(0, 0);
	  background: greenyellow;
	}
	.inner {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100px;
	  height: 100px;
	  background: pink;
	}
</style>
<body>
	<div class="outer">
  		<div class="mid">
    		<div class="inner"></div>
  		</div>
	</div>
</body>
</html>

以上代码，所呈现的布局样式为：

若我们删除去父元素的transform属性：

代码为：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style>
	.outer {
	  overflow: hidden;
	  width: 300px;
	  height: 300px;
	  background: yellow;
	}
	.mid {
	  margin: 20px;
	  width: 200px;
	  height: 200px;
	  background: greenyellow;
	}
	.inner {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100px;
	  height: 100px;
	  background: pink;
	}
</style>
<body>
	<div class="outer">
  		<div class="mid">
    		<div class="inner"></div>
  		</div>
	</div>
</body>
</html>

则此时的布局样式将变为：