「CSS」transform使fixed布局失效问题

项目当中，遇到需要加一个吸顶效果组件。原思路，使用Vant组件库中Sticky 粘性布局组件。后发现无法实现吸顶效果。排查后发现原因为：父元素的transform使子元素fixed布局失效，子元素从原本的fixed布局，变为绝对定位布局absolute。

总结：做粘性布局或者吸顶效果时，应避免父元素使用transform。

演示代码 吸顶效果

<div id="app">
	<div class="box"></div>
	<div class="test">
		<van-sticky>
			<van-button type="warning">吸顶效果</van-button>
		</van-sticky>
	</div>
</div>
<style>
html,
body,
#app {
  width: 100%;
}

.box {
  width: 250px;
  height: 250px;
  background-color: pink;
}

.test {
  width: 250px;
  height: 1800px;
  background-color: red;
}
</style>

添加Transform导致吸顶效果失效

<div id="app">
	<div class="box"></div>
	<div class="test">
		<van-sticky>
			<van-button type="warning">吸顶效果</van-button>
		</van-sticky>
	</div>
</div>

<style>
html,
body,
#app {
  width: 100%;
  /* 父元素添加transform */
  transform: scale(0.8) 
}

.box {
  width: 250px;
  height: 250px;
  background-color: pink;
}

.test {
  width: 250px;
  height: 1800px;
  background-color: red;
}
</style>