Как сделать чтобы элемент с position absolute не смещался внутри блока с overflow-x: scroll?

Question

[Денис Кузьмин]

Если проскролить блок вправо, то при наведении на .slide элемент .wrapper смещается вправо. Как сделать, чтобы он оставался на месте родителя .slide? Знаю, что можно для .slide сделать position: relative но тогда при наведении элемент .bottom будет перекрываться прокруткой, а мне нужно чтобы он был поверх элемента .banner

На codepen:

Comments

[Froggyweb]

.slide:hover .wrapper {
width: 150px;
position: absolute;
}
зачем это?

[Ankhena]

Было бы лучше, если бы вы описали задачу, которую нужно решить на самом деле, а не получившуюся из костылей.
И почему вы не можете сделать снизу отступ, чтобы всё помещалось внутрь?

Продолжая с вашим кодом, нужно на JS выяснять положение слайда до ховера и задавать нужны координаты.

[Денис Кузьмин]

Ankhena, нужно чтобы при наведении на .wrapper элемент .bottom показывался проверх полосы прокрутки и элемента .banner но при этом оставить возможность скроллить .slider-box вправо/влево
Хочу это всё реализовать без JS

[Денис Кузьмин]

Froggyweb, что именно?

[Ankhena]

Денис Кузьмин,

Хочу это всё реализовать без JS

-

[Денис Кузьмин]

Ankhena, без JS такое не получится?

[Ankhena]

Денис Кузьмин, я вижу только вариант с отступом

[Денис Кузьмин]

Ankhena, спасибо.
В итоге решил просто отказаться от этого эффекта появления поверх нижнего блока.

[Ankhena]

Денис Кузьмин, разумно