Переполнение-y при прокрутке div

У меня есть div, который прокручивается горизонтально к некоторым кнопкам с помощью jQuery. Это работает нормально, проблема в том, что у меня есть вложенный div в прокручиваемом контенте, который становится обрезанным, когда он перекрывает контейнер. Мне нужно переполнение по оси х, но не по оси у. overflow-x: скрытый, overflow-y visible должен решить эту проблему, но не решает. Я работаю, если я удаляю переполнение, но мне нужен overflow-x для прокрутки div.

Упрощенный HTML / CSS ниже - без логики прокрутки, так как это не то, что здесь проблематично... должно быть легко?

Спасибо миллион:) Энди

    <!DOCTYPE html>
    <html>
        <head>
            <title>TestDiv</title>
        </head>
        <body>
            <div style="width:100%; height:150px; border:1px solid blue">
               TOP DIV
           </div>
           <div class="slide" style="height:150px; width:800px;  border: 1px solid blue; background-color: pink;">
               <div style="border: 1px solid blue; width:1200px; height:150px;" class="inner" id="slider">
                    <table  cellspacing="0" cellpadding="0" border="2" style="table-layout:fixed; width: 1200px; height:150px">
                    <tr><td>AAAAAAAAA</td><td>BBBBBBBBB</td><td><div class="container"><div class="testDiv">XXX</div></div>CCCCCCCCC</td><td>DDDDDDDDDD</td><td>EEEEEEEEEE</td><td>FFFFFFFFF</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td></tr>
                </table>
            </div>
           </div>
            <div style="width:100%; height:150px; border:1px solid green;">
                BOTTOM
            </div>
        </body>
    </html>
<style scoped="scoped">
    .slide
    {
        position:relative;
        overflow-x: hidden;
        overflow-y:visible;
    }

    .slide .inner
    {
        overflow-y:visible;
        position:absolute;
        left:0;
        bottom:0;
        padding:0px;
    }
    .container
    {
        width: 20px;
        height: 20px;
        background-color: black;
        position: relative;
    }
    .testDiv
    {
        width: 235px;
        position: absolute;
        z-index: 999;
        left:20px;
        top: -180px;
        height: 200px;
        background-color: greenyellow;
    }
</style>
Источник

1 ответ

Проблема в том, что вы используете "фиксированное" позиционирование. Это будет работать только с "относительным" позиционированием. Чтобы преобразовать в относительное позиционирование, вы должны помнить, что местоположение Top относится к предыдущему братскому элементу, тогда как left относится к родительскому элементу.

Источник
Другие вопросы по тегам