滚动外层的窄div，如何能让内层的宽div中的文本，尽可能一直显示在屏幕内？

Question

滚动 div#container 时，如果 div.item 在视野内，如果保证 String-String 一直在视野内？

https://codepen.io/homor/pen/BaLPoQb

代码如下：

<div id="container">
    <div class="stage">
        <div class="item">
            String-String
        </div>
    </div>
</div>

<style>
#container{
    width: 300px;
    height: 80px;
    overflow: scroll;
}

.stage{
    width: 1000px;
    position: relative;
}

.item{
    position: absolute;
    left: 100px;
    right: 200px;
    width: 400px;
    text-align: center;
    background-color: yellow;
}
</style>

有没有优雅的办法可以实现？

Answer 1

<span>
String-String
</span>
span {

position: sticky;
left: 0;

}

用sticky定位，不知道是不是楼主想要的