我有一个水平滚动的 div，它与一些带有 jQuery 的按钮 Hook 。这工作正常，问题是我在可滚动内容中有一个嵌套的 div，当它与容器重叠时会被剪掉。我需要在 x 轴上溢出而不是在 y 轴上。 overflow-x: hidden, overflow-y visible 应该可以解决这个问题，但没有。如果我删除溢出，我确实可以工作，但我需要 overflow-x 来滚动 div。
下面的简化 html/css - 没有滚动逻辑，因为这不是这里的问题..应该很简单？
非常感谢 :) Andy
<!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>
最佳答案
问题是您使用的是“固定”定位。这仅适用于“相对”定位。要转换为相对定位，您需要记住 Top 位置是相对于前一个兄弟元素的，而 left 是相对于父元素的。
关于css - 溢出-y 滚动 div 裁剪嵌套 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16117922/