css - 使用 CSS 禁用 <header> 标签而不隐藏

Question

如何制作 <header>在不隐藏的情况下禁用 CSS？我没有看到任何可以添加到元素的 disabled 属性。我在标题标签中有一些下拉菜单和按钮。

当我想禁用整个页面时。我使用 JQuery 添加了一个带有类的 div。

<div class="modalOverlay"></div>

CSS样式是

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    right:0%;
    bottom : 0%;
    background-color: rgba(0, 0, 0, 0.1); /* black semi-transparent */
}

该样式适用于除 header 标签中的元素之外的整个页面。我如何禁用那些？可能使用 CSS，所以我可以只添加一个类并在必要时删除它。

更新:

<header>
    <nav class="navbar navbar-default">
        <a class="navbar-brand" href="#"> Title </a> <a
            class="toggle-nav btn pull-left" href=""> <i class="icon-reorder"></i>
        </a>
        <ul class="nav">
            <li class="dropdown medium only-icon widget"><a
                class="dropdown-toggle" data-toggle="dropdown" href=""> <i
                    class="icon-rss"></i>
                    <div class="label">1</div>
            </a>
                <ul class="dropdown-menu">
                    <li><a href="">
                            <div class="widget-body">
                                <div class="pull-left icon">
                                    <i class="icon-user text-success"></i>
                                </div>
                                <div class="pull-left text">
                                    New User Added. <small class="text-muted">just now</small>
                                </div>
                            </div>
                    </a></li>
                    <li class="divider"></li>
                    <li class="widget-footer"><a href="">All notifications</a></li>
                </ul></li>
            <li class="dropdown dark user-menu"><a class="dropdown-toggle"
                data-toggle="dropdown" href=""> <img width="23" height="23"
                    alt="userName" src="assets/images/male_icon.png" />
                    <span class="user-name">Hi, Guest</span> <b
                    class="caret"></b>
            </a>
                <ul class="dropdown-menu">
                    <li><a href=""> <i class="icon-user"></i> Profile
                    </a></li>
                    <li><a href=""> <i class="icon-cog"></i> Settings
                    </a></li>
                    <li class="divider"></li>
                    <li><a href="" ng-click="logout()"> <i
                            class="icon-signout"></i> Sign out
                    </a></li>
                </ul></li>
        </ul>
    </nav>
</header>

谢谢。

Answer 1

你可以试试“z-index:99”

.modalOverlay {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0%;
 left: 0%;
 right:0%;
 bottom : 0%;
 z-index:99;
 background-color: rgba(0, 0, 0, 0.1); /* black semi-transparent */
}