CSS overflow-y：visible，overflow-x：scroll [英] CSS overflow-y:visible, overflow-x:scroll

问题描述

我在我的搜索中看到了这样的一些问题，但是问题没有得到正确回答或者没有回答。

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>

好吧，这只是一个例子。但基本上，我想要完成的是.child类可以在y轴上滚动...上下滚动。但我想要x轴...子菜单在.parent容器外部可见。

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.

这是否有意义？所以发生的是，当页面呈现时，浏览器将溢出解释为自动完全，不尊重单独的轴。我做错了什么或浏览器只是不符合CSS3规范呢？大部分只在Chrome上测试。

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.

推荐答案

我想出来了！

父类应该溢出：auto;
.child应该是position：relative;
.child-menu应该是position：fixed;具有否顶部或左侧定位。
如果你这样做，它会保持它内联的内容。

The parent should be overflow:auto; The .child should be position:relative; The .child-menu should be position:fixed; with NO top or left positioning. If you do this, it will keep it it inline with the content.

如果你需要移动子菜单使用边距，而不是顶部或左边。示例margin-left：-100px;

If you need to move the child-menu use margins and not top or left. Example margin-left:-100px;

这篇关于CSS overflow-y：visible，overflow-x：scroll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！