1

我有一个水平滚动的 div，它使用 jQuery 连接到一些按钮。这工作正常，问题是我在可滚动内容中有一个嵌套的 div，当它与容器重叠时它会被剪裁。我需要在 x 轴上溢出，而不是在 y 轴上。overflow-x: hidden, overflow-y visible 应该可以解决这个问题，但不能。如果我删除溢出，我确实可以工作，但我需要溢出-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>
4

1 回答 1

1

问题是您使用的是“固定”定位。这仅适用于“相对”定位。要转换为相对定位，您需要记住 Top 位置是相对于前一个兄弟元素的，而 left 是相对于父元素的。

于 2013-08-22T12:02:53.253 回答