HTML divs over another

Question

I tried one of the suggestion given by SOF but did not work. I'm trying to make a context menu which I have the menu item over a gray band at the left. Here's the code but even with z-index to 10 my menu items appears below. Anyone have a trick to put the menu items over the band without too much effort and changes ?

<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

well, you need to wrap your content inside div and in the parent div give style display:inline-flex;

here is your code:

<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>

Also it will be easier to figure out any problems if you do the styling in separate sheet or in header, Or if you want to apply your style to another content.

By the way I don't think you need to z-index.

Iet me know if you have any question.