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。

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

HTML替代另一个

1 个答案: