CSS 溢出-y :visible, 溢出-x:滚动

Question

我在搜索中看到过几个类似的问题，但要么没有正确回答问题，要么没有给出答案。所以，我再问一次。

<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 上测试过。

Answer 1

我想通了!

父级应该是overflow:auto；.child 应该是 position:relative;.child-menu 应该是 position:fixed; NO 顶部或左侧定位。如果您这样做，它将使其与内容保持一致。

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

编辑

似乎人们仍在使用它，请注意，您必须使用 javascript 在页面滚动时移动固定元素。