使用z-index（css）制作hider面板

Question

我试图在我的某个页面中弹出一个弹出窗口。首先，我需要一个在所有东西上面的面板（Hider Panel）。我用css z索引试了一下。但问题是;我的hiderpanel没有站在我的导航栏 - 母版页的导航栏 - 甚至我的导航栏的z-index低于hiderpanel。

有什么想法吗？

  

编辑：我的内容css：

＆＃13;

＆＃13;

.wrapper
{   
  
    position:fixed;
    background-color:#313338;
    width:100%;
    margin:0px 0px 10px;
    padding:0px;
    height:30px;
    color:#313338;
    border-radius:0px 0px 0px 0px;
    z-index:1;
}
.menu
{
    border-style: none;
    border-color: inherit;
    border-width: medium;
    position: fixed;
    top: 40px;
    left: 225px;
    width: 200px;
    margin-left: -225px;
    border-radius: 0;
    overflow-y: auto;
    background-color:#e6e7e8;
    bottom: 0;
    overflow-x: hidden;
    padding-bottom: 20px;   
    z-index:1;     
}
.page
{
    top:30px;
    left:200px;
    position:absolute;       
    padding:0;
    margin:0;
    width:80%;
    height: 100%;
    z-index:-1;
}

.hiderpanel
{    
    position:fixed;
    top:0;
    left:0;    
    height:100%;
    width:100%;
    z-index:15;     
    background: rgba(64, 64, 64, 0.5);
    opacity:0.5;
}

＆＃13;

<div class="wrapper"></div>
<div class="menu"><div>
<div class="page">
  <div class="hiderpanel">
    <div>
  <div>

＆＃13;

＆＃13;

＆＃13;

  

我不明白它在这里有效：/

Answer 1

您希望您的侧面板位于所有其他内容之上吗？如果是，则将位置固定到侧面板和顶部标题，并将z-index提供给侧面板高于标题面板

Answer 2

确保所有对象都具有position: relative; CSS定义，如果没有z-index属性则无法使用。 position的替代值可能是固定的和绝对的。

Answer 3

请提供一些代码。但我认为这是以下原因之一：

  

注意： z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

第二个可能的原因：如果z-index: 100;的元素的父级或祖父级具有z-index: 1;，则它无法突破。我的意思是z-index: 2;（在此父级之外）的另一个元素覆盖了z-index: 100;

元素