fixed固定定位transofrm失效的解决

当一个元素有fixed定位属性时，会将该元素相对于浏览器窗口进行定位，并且该元素会从文档流中脱离，不再影响其他元素的位置。在此情况下使用transform属性进行变换时，可能会遇到失效的问题。下面介绍几种解决方法。

当一个元素有fixed定位属性时，会将该元素相对于浏览器窗口进行定位，并且该元素会从文档流中脱离，不再影响其他元素的位置。在此情况下使用transform属性进行变换时，可能会遇到失效的问题。下面介绍几种解决方法。

方法一：使用translate代替transform

将transform属性替换成translate属性来解决该问题，因为translate属性在水平和竖直方向会移动盒子，但不会改变其布局属性。

position: fixed;
top: 0;
left: 0;
transform: translate(0, 0);

方法二：为固定定位元素添加父级元素

通过将一个父级元素设置为fixed定位，然后将子元素变换，就可以解决transform失效的问题。

<style>
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
  }
</style>

<div class="fixed">
  <div class="inner">{content ...}</div>
</div>

<style>
  .inner {
    transform: translateX(-50%);
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
  }
</style>

通过为固定定位元素添加一个父级元素，我们可以让父级元素保持在一个层叠上下文之内，并且对于子元素的transform属性不会产生影响，可以顺利进行。