添加rotate旋转后sticky粘性定位元素位置异常如何修复？

错位原因 #

该问题是CSS transform的默认渲染规则导致的：

1. transform默认以元素自身的中心点作为旋转原点，rotate(-90deg)执行后，元素的视觉渲染位置会和它在文档流中的原始占位产生偏移
2. 不同长度的文本对应的sticky元素宽度不同，旋转产生的偏移量也不一致，因此会出现文本越短整体位置越靠左的现象
3. transform仅修改元素的视觉渲染结果，不会改变它在文档流中的实际占位，所以会出现元素显示在父元素外部的问题

修复方法 #

只需要调整旋转原点，再配合位移修正偏移即可，修改.sticky的样式代码如下：

.sticky {
  position: sticky;
  top: 0;
  /* 将旋转基准点固定在元素左上角，统一所有元素的旋转基准 */
  transform-origin: left top;
  /* 旋转后向上平移自身高度，抵消旋转带来的位置偏移 */
  transform: rotate(-90deg) translateY(-100%);
  display: inline-block;
  background: #fff;
  padding: 10px;
  box-shadow: 0 0 8px -1px silver;
  border-radius: 2px;
}

适配性更强的方案 #

如果后续还要添加其他变换效果，建议拆分定位和变换的逻辑，用嵌套容器分别实现：

调整HTML结构 #

<!-- 单个父元素示例 -->
<div class="parent">
  <!-- 外层仅负责sticky定位 -->
  <div class="sticky-wrap">
    <!-- 内层仅负责旋转和样式渲染 -->
    <div class="sticky-content">
      I'm Sticky Number One and i'm long
    </div>
  </div>
</div>

新增对应CSS #

.sticky-wrap {
  position: sticky;
  top: 0;
  display: inline-block;
}
.sticky-content {
  transform-origin: left top;
  transform: rotate(-90deg) translateY(-100%);
  background: #fff;
  padding: 10px;
  box-shadow: 0 0 8px -1px silver;
  border-radius: 2px;
}

这种方案可以彻底避免transform对sticky定位逻辑的干扰，后续修改样式也不会影响定位效果。

内容的提问来源于stack exchange，提问作者user16262715