在可滚动内容

Question

我有一个滑块，它有固定的宽度。然后，有一个包含行和项目的包装器，理论上宽度不受限制。因此，您可以使用水平滚动条查看所有内容。现在，行还有一个名为fixed的特殊元素。滚动时，此元素应保留在同一位置。我的问题是元素与其他项目一起移动。

.slider {
  position: relative;
  width: 300px;
  border: 2px solid black;
  overflow-x: scroll;
}
.slider .wrapper {
  width: 5000px;
}
.slider .wrapper .item {
  width: 150px;
  height: 150px;
  float: left;
}
.slider .wrapper .item.red {
  background-color: red;
}
.slider .wrapper .item.blue {
  background-color: blue;
}
.slider .wrapper .item.green {
  background-color: green;
}
.slider .wrapper .fixed {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  background-color: yellow;
}

<div class="slider">
    <div class="wrapper">
        <div class="row">
            <div class="fixed"></div>
            <div class="item red"></div>
            <div class="item blue"></div>
            <div class="item green"></div>
        </div>
    </div>
</div>

请注意几件事：

• 元素.fixed 必须位于元素.row内（实际代码太大而无法发布，这是获取要点的简单示例）
• 只是纯HTML / CSS，没有JavaScript或jQuery
• .slider之前有一个内容，因此使用position: fixed;会破坏它，就像在此屏幕截图中一样：