Css 滚动div剪裁嵌套div时溢出-y_Css_Scroll_Clipping

Css 滚动div剪裁嵌套div时溢出-y

css scroll

Css 滚动div剪裁嵌套div时溢出-y,css,scroll,clipping,Css,Scroll,Clipping,我有一个div，它通过jQuery水平滚动并连接到一些按钮。这很好，问题是我在可滚动内容中有一个嵌套的div，当它与容器重叠时会被剪裁。我需要在x轴上溢出，但在y轴上不需要。溢出-x：隐藏，溢出-y可见应该可以解决这个问题，但不能。如果我删除溢出，我确实可以工作，但是我需要overflow-x来滚动div 下面是简化的html/css-没有滚动逻辑，因为这不是问题所在。。应该很容易吗万分感谢：）安迪 TestDiv 顶球 AAAAAAAA BBBBBBBBB XXXCCCCCCCCCCDD

我有一个div，它通过jQuery水平滚动并连接到一些按钮。这很好，问题是我在可滚动内容中有一个嵌套的div，当它与容器重叠时会被剪裁。我需要在x轴上溢出，但在y轴上不需要。溢出-x：隐藏，溢出-y可见应该可以解决这个问题，但不能。如果我删除溢出，我确实可以工作，但是我需要overflow-x来滚动div

下面是简化的html/css-没有滚动逻辑，因为这不是问题所在。。应该很容易吗

万分感谢：）安迪


TestDiv
顶球
AAAAAAAA BBBBBBBBB XXXCCCCCCCCCCDDDDDDDDEDEEEEEFFFFFFFFFFGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
底部
滑动
{
位置：相对位置；
溢出x：隐藏；
溢出y：可见；
}
.幻灯片.内部
{
溢出y：可见；
位置：绝对位置；
左：0；
底部：0；
填充：0px；
}
.集装箱
{
宽度：20px；
高度：20px；
背景色：黑色；
位置：相对位置；
}
.testDiv
{
宽度：235px；
位置：绝对位置；
z指数：999；
左：20px；
顶部：-180px；
高度：200px；
背景颜色：绿黄色；
}

问题在于您使用的是“固定”定位。这只适用于“相对”定位。要转换为相对定位，您需要记住顶部位置是相对于上一个同级元素的，而左侧是相对于父元素的。

您可以制作一个JSFIDLE吗？

    <!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>