fixed固定定位transofrm失效的解决

固定定位（position: fixed）是一种常用的 CSS 布局方式，它能够使元素相对于视口固定不动，无论页面滚动到哪里都保持在同一个位置。然而，在使用固定定位的元素中应用 transform 属性时，有时会导致该属性失效。这个问题通常出现在 Chrome、Safari 等浏览器上，而 Firefox 等其他浏览器则没有此问题。

造成这个问题的原因是，固定定位下的元素默认会受到图层剪裁（clipping）的影响，而 transform 属性需要开启硬件加速才能生效。因此，需要通过一些小技巧来解决这个问题。

最简单的方法是将 transform 属性放在固定定位之前的元素上进行变换：

1 2 3 4

<div class="container">   <div class="fixed"></div>   <div class="content"></div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.container {   position: relative; } .fixed {   position: fixed;   top: 0;   left: 0;   width: 100%;   z-index: 999; } .content {   /* 先进行 transform 变换 */   transform: translate(-50%, -50%);   position: absolute;   top: 50%;   left: 50%;   z-index: 1; }

将 transform 变换设置在了 content 元素上，而 fixed 元素则不需要 transform 变换，只需要设置固定定位即可。这样就能够避免 transform 属性失效的问题。

除此之外，在使用固定定位和居中对齐时，还有一些小技巧可以实现更好的布局效果：

• 使用绝对定位将元素水平和垂直居中

1 2 3 4 5 6

<div class="container">   <div class="fixed"></div>   <div class="content">     <div class="centered">Centered Content</div>   </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

.container {   position: relative; } .fixed {   position: fixed;   top: 0;   left: 0;   width: 100%;   z-index: 999; } .content {   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   z-index: 1; } .centered {   /* 使用绝对定位将元素水平和垂直居中 */   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   text-align: center; }

将 content 元素设置为绝对定位，并将其四个边距都设为 0，以使其占据整个父容器的空间。然后，我们在该元素内部再创建一个 div 元素，并将其设置为绝对定位，同时使用 translate 属性将其水平和垂直居中。这个 div 元素内部的文本则可以使用 text-align 属性进行居中对齐。

• 使用 flexbox 将元素水平和垂直居中

1 2 3 4 5 6

<div class="container">   <div class="fixed"></div>   <div class="content">     <div class="centered">Centered Content</div>   </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.container {   position: relative; } .fixed {   position: fixed;   top: 0;   left: 0;   width: 100%;   z-index: 999; } .content {   /* 使用 flexbox 将元素水平和垂直居中 */   display: flex;   align-items: center;   justify-content: center;   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   z-index: 1; } .centered {   text-align: center; }

将 content 元素设置为绝对定位，同时使用 flexbox 布局将其内部的元素水平和垂直居中。具体来说，我们将该元素的 display 属性设为 flex，然后使用 align-items 属性将其垂直居中，使用 justify-content 属性将其水平居中。