CSS overflow-y：visible，overflow-x：scroll

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

我明白了！

父母应该溢出：auto; .child应该是position：relative; .child菜单应该是position：fixed; NO 顶部或左侧定位。 如果您这样做，它将使其与内容保持一致。

如果您需要移动子菜单，请使用边距而不是顶部或左侧。 margin-left示例：-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;
}