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>