CSS overflow-y:visible,overflow-x:scroll
我在搜索中看到过这样的一些问题,但要么问题没有得到正确回答,要么没有回答.所以,我会再问一次.
<style>
.parent { overflow-y:scroll; overflow-x:visible; width:100px; }
.child { position:relative; }
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; }
</style>
<div class="parent">
<!-- Lots of the following divs -->
<div class="child">
Text Line
<div class="child-menu">some pop out stuff</div>
</div>
</div>
好吧,这只是一个例子.但基本上,我想要完成的是.child类可以在y轴上滚动...向上和向下滚动.但我想要x轴......子菜单在.parent容器外可见.
那有意义吗？所以发生的事情是,当页面呈现时,浏览器将溢出解释为完全自动而不尊重单独的轴.我做错了什么或浏览器还没有达到CSS3规范呢？大部分只在Chrome上测试过. 
Sen*_*lez 33
我想到了!
父母应该溢出:auto; .child应该是position:relative; .child菜单应该是position:fixed; 与NO顶部或左侧的定位.如果您这样做,它将使其与内容保持一致.
如果您需要移动子菜单使用边距而不是顶部或左侧.margin-left示例:-100px;
编辑
由于人们似乎仍然使用此功能,请注意,当页面滚动时,您必须使用javascript移动固定项目.
- 如果他们将来看到这个答案,只是为了节省任何时间,这**不会导致弹出窗口在侧边栏滚动时滚动.因此,如果你使用这样的东西,你将不得不使用JS来跟踪滚动. (12认同)
- 滚动时这不起作用吗？在我看来，滚动会滚动 .child，但不会滚动 .child-menu。如果是这种情况，那么这似乎不是一个合理的解决方案。 (2认同)
小智 5
到这里就解决了！他们使用CSS和JS。
.child:hover .child-menu { display: block; }
.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px }
.child { position:static; }
.child-menu { position:absolute; display:inline-block; display: none; }
https://css-tricks.com/popping-hidden-overflow/