欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何用overflow-x auto在容器外顯示絕對div

CSS
謝彥文1年前8瀏覽0評論

我想設置標題菜單，包含幾個下拉菜單的項目。當屏幕上只有幾個項目時，它工作得很好，但是當我在標題上添加一個水平滾動條(overflow-x: auto)時(如果有很多菜單項的話)，dropdowns元素是& quot卡住& quot標題容器內(nèi)部。

(PS:我希望水平滾動條只在頁眉，而不是所有頁面)

示例:

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .body {
        width: 200px;
        overflow: hidden;
      }
      .item {
        position:relative;
      }
      .sub-item {
        border: 1px solid black;
        background: white;
        position: absolute;
        white-space: nowrap;
        padding: 5px;
        right: 0;
      }
      .head {
        display:flex; 
        gap:1rem; 
        padding: 10px; 
        border-bottom: 2px solid black; 
      }
    </style>
  </head>
  <body>
    <div class="body">
      <div class="head">
        <div>item_1</div>
        <div class="item">
          <div>item_2</div>
          <div class="sub-item">sub item</div>
        </div>
        <div>item_3</div>
        <div class="item">
          <div>item_4</div>
          <div class="sub-item">sub item</div>
        </div>
      </div>
      <div style="padding: 10px">Lorem ipsum, dolor sit amet consectetur adipisicing elnem!</div>
    </div>
  </body>
</html>

所以為了添加滾動條，我放了overflow-x:auto；在類頭中，但是下拉項隱藏在頭容器中