HTML / CSS div使用z-index属性相互排序

问题描述

我面临使用HTML / CSS将覆盖面板置于图标上方的问题。我有两个组件，分别是组件A和组件B。

组件A：它是标题和面包屑设计。在标题部分，我有向下箭头，它将打开覆盖面板并允许用户注销。

组件B：这是一个家庭组件，我有一些图形视图，在该组件中，我使用了搜索图标来允许用户搜索/添加/编辑图形。使用margin-top CSS属性将搜索图标放置在面包屑div右侧的顶部和覆盖面板部分的底部。

现在，问题出在面包屑div上，我给定了z-index：0； 在组件B图标div中，我给了z-index：1001。如果我给z-index小于1001，则搜索图标不可见。 在覆盖面板中，如果我给z-index：3和组件B图标div z-index：2，则不会在面包屑div的右侧显示组件B图标。

组件A：

Overlay Panel:

    HTML:
        <div class="layout-topbar-menu-wrapper">
            <ul class="topbar-menu fadeInDown">
                    <a>
                        <button type="button">
                            <span class="glyphicon glyphicon-chevron-down"></span>
                        </button>
                    </a>
                    <ul class="fadeInDown">
                        <li role="menuitem">
                            <a>
                                <span class="textColor"><i class="material-icons textColor">exit_to_app</i>logout</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    
    CSS:
        .layout-wrapper .layout-main .layout-topbar .layout-topbar-menu-wrapper .topbar-menu>li.active-topmenuitem>ul {
            display: block;
            background-color: #f5f5f5;
            z-index: 3 !important;
        }
        .layout-wrapper .layout-main .layout-topbar .layout-topbar-menu-wrapper .topbar-menu>li>ul {
            position: absolute;
            top: 26px;
            right: -26.9px;
            display: none;
            width: 180px;
            background-color: #ffffff;
            -webkit-animation-duration: .5s;
            -moz-animation-duration: .5s;
            animation-duration: .5s;
            list-style-type: none;
            margin: 0;
            padding: 8px 0;
            /* border-top: 4px solid #607D8B; */
            -webkit-Box-shadow: 0 10px 20px rgba(0,0.19),0 6px 6px rgba(0,0.23);
            -moz-Box-shadow: 0 10px 20px rgba(0,0.23);
            Box-shadow: 0 10px 20px rgba(0,0.23);
        }
        .fadeInDown {
            -webkit-animation: fadeInDown 5s;
            animation: fadeInDown 5s;
        }
    
BreadCrumb Div CSS:

    HTML:
        <div class="ui-grid-col">
            <div class="layout-breadcrumb" (click)="app.onSidebarClick($event)">
                <ul>
                    <li>
                        <span class="hyperLinkWithPointerCursorDocument">
                            <i class="fa fa-home"></i>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    
    CSS:
        body .layout-breadcrumb {
            background-color: #F4F4F4 !important;
            border-bottom: 2px solid #f2f2f2;
            position: fixed;
            z-index: 1;
            height: 35px;
            width: 100% !important;
            margin-left: 9.5em;
            margin-top: -2.5em;
            white-space: Nowrap;
            overflow-x: auto;
            overflow-y: hidden;
        }

组件B：

Search icon Div CSS:

    HTML:
        <div>
            <span *ngIf="!isEditWidget">
              <a class="hyperLinkWithPointerCursorDocument">
                <i class="graphSearchIcon"></i>
              </a>
            </span>
        </div>
    
    CSS:
        body .graphSearchIcon {
            top: 1.8em;
            margin-right: -2em;
            z-index: 2;
            position: fixed;
            font-size: 25px !important;
            float: right;
            right: 2em;
            border-radius: 25px;
            width: 1.5em !important;
            height: 1.5em !important;
            padding: 4.2px;
            padding-left: 5px;
            padding-top: 6px;
            color: #9d9d9d !important;
        }

任何人都可以帮助我使用HTML / CSS进行处理。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）