А vertical scroll appears when a horizontal scroll is specified when there is an absolute element inside

Question

<div style="overflow-x:scroll;">
  <div style="position: relative; width:3000px; height:100px; background:green; ">
    <div style="position: absolute; width:200px; height:200px; background:red; top:10px; left:10px "></div>
  </div>
</div>

Result:

I need to do it as in the picture below (horizontal scrolling should remain, the red block is on top of everything, the red one will scroll horizontally along with the green one):

Is there a way to do this without JavaScript?

It can be done using position:fixed and using javascript to set the coordinates for the red block by onscroll event, but it's not pretty

I wrote a solution in javascript https://codepen.io/vvpolyakov/pen/mdoQLPb

Answer 1

Didn't quite understood the problem. As per What I understood you want to make the red box to scroll horizontally with the green one.

You can utilize the position: sticky property along with left: 0 to keep the red block fixed horizontally while allowing it to scroll vertically. Here's how you can modify your HTML and CSS:

<div style="overflow-x: scroll;">
  <div style="position: relative; width:3000px; height:100px; background:green; ">
    <div style="position: sticky; width:200px; height:200px; background:red; top:10px; left:0;"></div>
  </div>
</div>

This setup will keep the red block fixed horizontally while allowing both the green and red blocks to scroll horizontally together.