CSS 溢出-y：可见，溢出-x：滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5209545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS overflow-y:visible, overflow-x:scroll
提问by Senica Gonzalez
I've seen a few questions like this in my search, but either the question didn't get answered properly or no answer was given. So, I'll ask again.
我在搜索中看到过一些这样的问题，但问题要么没有得到正确回答，要么没有给出答案。所以，我再问问。
<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>
Alright, that's just an example. But basically, what I'm trying to accomplish is have the .child classes be scrollable on the y axis...scroll up and down. But I want the x-axis....the child-menu's to be visible outside the .parent container.
好吧，这只是一个例子。但基本上，我想要完成的是让 .child 类可以在 y 轴上滚动......向上和向下滚动。但我希望 x 轴......子菜单在 .parent 容器外可见。
Does that make sense? So what is happening is that when the page renders, the browser is interpreting the overflow as auto altogether and not respecting the separate axis. Am I doing something wrong or are the browsers just not up to CSS3 spec yet on this? Mostly only tested on Chrome. 
那有意义吗？所以发生的事情是，当页面呈现时，浏览器将溢出完全解释为自动，而不是尊重单独的轴。我做错了什么还是浏览器还没有达到 CSS3 规范？大多数情况下仅在 Chrome 上测试。
采纳答案by Senica Gonzalez
I figured it out!
我想到了！
The parent should be overflow:auto; The .child should be position:relative; The .child-menu should be position:fixed; with NOtop or left positioning. If you do this, it will keep it it inline with the content.
父级应该是 overflow:auto; .child 应该是 position:relative; .child-menu 应该是 position:fixed; 与NO顶部或左侧定位。如果您这样做，它将使其与内容保持一致。
If you need to move the child-menu use margins and not top or left. Example margin-left:-100px;
如果您需要移动子菜单，请使用边距而不是顶部或左侧。示例 margin-left:-100px;
EDIT
编辑
As it seems people still use this, please note that you will have to use javascript to move the fixed items as the page scrolls.
由于似乎人们仍在使用它，请注意，当页面滚动时，您将不得不使用 javascript 来移动固定项目。
回答by blondo
It solved here! They use css and JS.
这里解决了！他们使用 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/
回答by user8408775
.parent {
overflow-y: auto;
width: 100px;
}
.child-menu {
display: block;
position: fixed;
top: auto;
left: auto;
}
