CSS overflow-y:可见，overflow-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 axis...scroll上上下滚动。但我希望x轴……子菜单在.parent容器外可见。

这有意义吗？所以发生的情况是，当页面呈现时，浏览器将溢出解释为完全自动，而不考虑单独的轴。是我做错了什么，还是浏览器在这方面还没有达到CSS3规范？大多数情况下只在Chrome上测试。

Answer 1

我想通了！

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

如果需要移动子菜单，请使用页边距，而不是顶部或左侧。左边距示例：-100px；

编辑

看起来人们仍然在使用它，请注意，当页面滚动时，你将不得不使用javascript来移动固定的项目。

Answer 2

在这里解决了！他们使用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/

https://jsfiddle.net/68fBE/2/

Answer 3

.parent { 
   overflow-y: auto; 
   width: 100px; 
}

.child-menu {
   display: block;
   position: fixed;
   top: auto;
   left: auto;
}