菜单项隐藏在数据列表后面

Question

由于某种原因，我的菜单下拉项隐藏在我的数据列表项后面。 我在菜单中添加了高达 999 的 z-index，但它对我没有帮助。

图片在这里：https://i.imgur.com/O3UkhZm.png

我真的不知道是什么原因导致了这个问题，而且我对 css 和 html 还是很陌生，很抱歉代码混乱！ :)

html menu:

<div style="z-index: 9999; display:block;">
    <asp:Menu ID="Menu2" runat="server" DataSourceID="SiteMapDataSource2"
      Orientation="Horizontal" StaticDisplayLevels="2" Font-Bold="True"
           Width="100%" CssClass="menuMan" IncludeStyleBlock="false"
             EnableViewState="false" />
</div>

datalist html:
<asp:DataList ID="dlBreaking" runat="server" Width="1%" Height="1%" 
                 RepeatColumns="1"  
                DataKeyField="Num" OnSelectedIndexChanged="dlBreaking_SelectedIndexChanged"  Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False">
            <ItemTemplate>
                <asp:LinkButton ID="lnkSelect" runat="server" CommandName="select" Font-Underline="false" ForeColor="Black">
                <center>
                <br />
                    <div class="tab3">
                     <table id="dl" style="border-color:#CB0000; background-color:#f1c40f;">
            <tr >
                <td rowspan="2" style="height: 280px;">
                      <asp:Image ID="Image2" runat="server" Width="718px" 
                                            Height="310px" CssClass="auto-style2" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ImageUrl") %>'
                          GenerateEmptyAlternateText="True" 
                                             />
                </td>
                <td rowspan="2" style="height: 280px; width:20px">
                    <a style="color:transparent">..........</a>
                </td>
                <td style="height: 280px; width: 265px;" rowspan="2">
                    <table style="width: 330px; height: 247px;">
                        <tr>
                            <td style="height: 81px;">
                                 <b style=" font-size:16px" ><%# Eval("CategoryName") %></b>
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 205px;">
                              <b style=" font-size:32px; height:200px;" ><%# Eval("Name") %></b></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
                         </div>
                </center>
                </asp:LinkButton>
            </ItemTemplate>
        </asp:DataList>

一些CSS：

.tab3 {
    background-color: white;
    border: 10px solid #dfe6e9;    
    position: relative;
    margin: 0 auto;
    z-index: 99;
    }

.tab3:before {
    background: none;
    border: 7px solid #d0d6d8;
    content: "";       
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    pointer-events: none;
    z-index: 99;
    }

 div.menuMan ul {
        background-color: #bdc3c7 /*#bfcbd6*/;
        color: none; /* #465c71; */
        text-decoration: none;
        text-align: right;
        position: relative;
    }

Answer 1

Z-index哥只对位置元素检查有效this答案

添加位置后，为要显示在后面的 div 赋予负值。