Блог

У меня есть элемент 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: элемент должен быть зафиксирован внутри контейнера по горизонтали, но не по вертикали

Похоже, вы хотите убрать наложенный 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;
}