transform内的fixed元素变成绝对定位实例页面

回到相关文章 »

效果：

滚动下面的区域

技术写作指南，不仅是写作指南

代码：

CSS代码：

.outer {
    border: solid;    
    height: 200px;
    overflow: auto;
}
.inner {
    height: 600px;
    transform: scale(1);
}
.target {
    position: fixed;
    left: 1rem; right:1rem;
    top: 100px;
    width: fit-content;
    margin-inline: auto;
}

HTML代码：

<div class="outer">
  <div class="inner">
    <span class="target">技术写作指南，不仅是写作指南</span>
  </div>
</div>