HTML div 覆盖另一个

Question

我尝试了 SOF 给出的建议之一，但没有奏效。我正在尝试制作一个上下文菜单，我的菜单项位于左侧的灰色带上。这是代码，但即使 z-index 为 10，我的菜单项也会出现在下面。任何人都有一个技巧，无需太多努力和更改即可将菜单项放在乐队上？

<div id="ContextMenu">
<div id="IContextOverlay" style="z-index:-1;position:absolute;background:gray;opacity:.5;left:0;top:0;width:100%;height:100%"></div>
<div id="IContext" style="margin-left:10px;margin-top:10px;z-index:1;background:GhostWhite;border:1px solid black;width:300px;height:400px;box-shadow: 5px 5px 15px">
    <div id="IBand" style="height:400px;z-index:0;width:32px;background:#dbdbdb;border:0 1px 1px 0 solid black"></div>
    <div style="z-index:10;vertical-align:middle;padding:5px;cursor:pointer;height:22px;" class="menuItemRowSelection">
        <img src="/Images/attachdocument.png" width="20" style="float:left" />
        <a id="menuItem_SendAttachment" class="ContextMenuText">Send attachment</a>
    </div>
    <div style="z-index:10;vertical-align:middle;padding:5px;cursor:pointer;height:22px" class="menuItemRowSelection">
        <img src="/Images/viewattachment.png" width="20" style="float:left" />
        <a id="menuItem_ViewDocument" class="ContextMenuText">View document</a>
    </div>

    <div style="z-index:10;border-top:1px solid black;width:95%;margin-left:5px;"></div>

    <div style="z-index:10;vertical-align:middle;padding:5px;cursor:pointer;height:22px" class="menuItemRowSelection">
        <img src="/Images/Copy.png" width="20" style="float:left" />
        <a id="menuItem_Copy" class="ContextMenuText">Copy</a>
    </div>
    <div style="z-index:10;vertical-align:middle;padding:5px;cursor:pointer;height:22px" class="menuItemRowSelection">
        <img src="/Images/Delete.png" width="20" style="float:left" />
        <a id="menuItem_Delete" class="ContextMenuText">Delete</a>
    </div>

    <div style="z-index:10;border-top:1px solid black;width:95%;margin-left:5px;"></div>
</div>

Answer 1

好吧，您需要将 content 包装在 div 和父级中 div给风格display:inline-flex;

这是你的代码：

<div id="ContextMenu">
  <div id="IContextOverlay" style="z-index:-1;position:absolute;background:gray;opacity:.5;left:0;top:0;width:100%;height:100%"></div>
  <div id="IContext" style="margin-left:10px;margin-top:10px;z-index:1;background:GhostWhite;border:1px solid black;width:300px;height:400px;box-shadow: 5px 5px 15px; display:inline-flex; ">
    <div id="IBand" style="height:400px;z-index:0;width:32px;background:#dbdbdb;border:0 1px 1px 0 solid black"></div>
    <div>
      <div style="z-index:10;vertical-align:middle;padding:5px;cursor:pointer;height:22px;" class="menuItemRowSelection">
        <img src="/Images/attachdocument.png" width="20" style="float:left" />
        <a id="menuItem_SendAttachment" class="ContextMenuText">Send attachment</a>
      </div>
      <div style="z-index:10;vertical-align:middle;padding:5px;cursor:pointer;height:22px" class="menuItemRowSelection">
        <img src="/Images/viewattachment.png" width="20" style="float:left" />
        <a id="menuItem_ViewDocument" class="ContextMenuText">View document</a>
      </div>

      <div style="z-index:10;border-top:1px solid black;width:95%;margin-left:5px;"></div>

      <div style="z-index:10;vertical-align:middle;padding:5px;cursor:pointer;height:22px" class="menuItemRowSelection">
        <img src="/Images/Copy.png" width="20" style="float:left" />
        <a id="menuItem_Copy" class="ContextMenuText">Copy</a>
      </div>
      <div style="z-index:10;vertical-align:middle;padding:5px;cursor:pointer;height:22px" class="menuItemRowSelection">
        <img src="/Images/Delete.png" width="20" style="float:left" />
        <a id="menuItem_Delete" class="ContextMenuText">Delete</a>
      </div>

      <div style="z-index:10;border-top:1px solid black;width:95%;margin-left:5px;"></div>
    </div>
  </div>
</div>

此外，如果您这样做，将更容易找出任何问题 在单独的工作表或标题中进行样式设置，或者如果您想应用您的 样式到另一个内容。

顺便说一句，我认为你不需要z-index。

如果您有任何问题，请告诉我。