水平固定元素，而不使用CSS垂直固定

Question

我在一个水平滚动的容器中有一个overlay元素。

我希望此覆盖层水平固定，但如果滚动窗口，则覆盖层应随页面一起滚动。 https://jsfiddle.net/Lvy9uq0n/1/

.box {
  height: 300px;
  width: 3000px;
  background: white;
  border: 1px solid black;
}

.overlay {
  position: fixed;
  left: 50%;
  padding: 10px;
  width: 200px;
}

html,
body {
  height: 1000px;
}

.container {
  overflow-x: scroll;
}

<div class="container">

  <div class="box">
    <div class="overlay">
      Overlay

    </div>
  </div>

</div>
<div syle="height:1000px">

  Test
</div>

TLDR：元素应水平固定在容器内，而不是垂直固定

Answer 1

听起来您想将overlay div从文档的正常流程中删除，这就是为什么我假设您使用了position: fixed类的原因。但是，这会将元素从文档流中移除，并且将其固定在相对于浏览器窗口的垂直位置。

尝试使用position: absolute将叠加层放置在流的外部，但仍然可以使其与文档一起正常滚动。您可以使用left: 0; right: 0和margin: auto将其居中。我不确定您想将叠加层从top移到何处：

.overlay {
  position: absolute;
  top: 10vh;
  left: 0; right: 0;
  margin: auto;
  padding: 10px;
  width: 200px;
}