css - still - overflow z index




CSS overflow-y:visible,overflow-x:scroll (2)

我在搜索中看到過這樣的一些問題,但要么問題沒有得到正確回答,要么沒有回答。 所以,我會再問一次。

<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上測試過。



我想到了!

父母應該溢出:auto; .child應該是position:relative; .child菜單應該是position:fixed; 沒有頂部或左側定位。 如果您這樣做,它將使其與內容保持一致。

如果您需要移動子菜單使用邊距而不是頂部或左側。 margin-left示例:-100px;

編輯

由於人們似乎仍然使用此功能,請注意您必須使用javascript在頁面滾動時移動固定項目。





overflow