试图使 div 出现在可滚动内容列表的顶部，但相对于列表项

Question

我在 div 中有一个项目列表。该列表可以在 Y 轴上滚动，但不能在 X 轴上滚动。

最终目标是让另一个 div 在单击时出现（上下文菜单），它应出现在 overflow/ignore div 的宽度限制之上并且它必须是相对于列表项。

请参阅附件示例，其中 #contextMenu 被硬编码到列表项 7 中。

#contextMenu内容受父div的X轴宽度限制，应该在上面

#parent {
  width: 150px;
  height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
position: relative;

}

.listItem {
}

#contextMenu {
  z-index: 999;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid rgb(165, 165, 165);
  width: 200px;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

<div id="parent">
  <ul>
    <li class="listItem">List item 1</li>
    <li class="listItem">List item 2</li>
    <li class="listItem">List item 3</li>
    <li class="listItem">List item 4</li>
    <li class="listItem">List item 5</li>
    <li class="listItem">List item 6</li>
    <li class="listItem">List item 7
      <div id="contextMenu">
        <p> Menu item 1</p>
        <p> Menu item 2</p>
        <p> Menu item 3</p>
      </div>
    </li>
    <li class="listItem">List item 8</li>
    <li class="listItem">List item 9</li>
    <li class="listItem">List item 10</li>
  </ul>

</div>

Answer 1

因为 contextMenu 是一个 child 元素，它总是相对于其 parent 的 z-index。它仍然是嵌套的。如果我理解正确，您希望 contextMenu 出现在 #parent div 的顶部 - 这是 child 时无法完成的。您很可能需要使用 javascript 在单击时在列表项的位置上创建一个新元素。

Answer 2

根据已接受答案中的推理提出我最终得到的解决方案。

已从上下文菜单中删除 z-index 并从父菜单中删除 position:relative;。将上下文菜单移动到与列表同级。添加了 JavaScript，在列表项的 mouseover 上会将上下文菜单的 CSS 更改为列表项的顶部位置。

$(document).ready(function() {
  // whenever we hover over a menu item that has a submenu
  // grab the menu item's position relative to its positioned parent

  $('.listItem').on('mouseover', function() {
    var menuItemPos = $(this).position();
    // place the menu in the correct position relevant to the menu item
    $("#contextMenu").css({
      top: menuItemPos.top,
      left: 120
    });
  });
});

#parent {
  width: 150px;
  height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.listItem {}

#contextMenu {
  position: absolute;
  background-color: #ffffff;
  border: 1px solid rgb(165, 165, 165);
  width: 200px;
  padding: 2px;
  display: block;
  list-style-type: none;
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <ul>
    <li class="listItem">List item 1</li>
    <li class="listItem">List item 2</li>
    <li class="listItem">List item 3</li>
    <li class="listItem">List item 4</li>
    <li class="listItem">List item 5</li>
    <li class="listItem">List item 6</li>
    <li id="listItem7" class="listItem">List item 7
    </li>
    <li class="listItem">List item 8</li>
    <li class="listItem">List item 9</li>
    <li class="listItem">List item 10</li>
  </ul>
  <div id="contextMenu">
    <p> Menu item 1</p>
    <p> Menu item 2</p>
    <p> Menu item 3</p>
  </div>

</div>

试图使 div 出现在可滚动内容列表的顶部，但相对于列表项

Trying to make div appear on top of scrollable list of content but relative to list item

html

css

z-index