Question

我有以下html，我需要的是其中包含文本的section标签应该过来＆amp;在叠加层上方。简单地给它更高的z-index也没有帮助。请注意，下面的html只是我所拥有的骨架，有更多的嵌套元素和内容，但是我只提供了所需的基本最小值。任何有关这方面的帮助将不胜感激。

plunk - http://plnkr.co/edit/sxC2D3nAgg7JJZjbOX0f?p=preview

HTML：

    <body>
     <div class="wrapper">
      <div class="content">
       <header>
        <div class="searchwrapper">
         <section>
           This is the text to be over & above overlay
         </section>
        </div>
       </header>
      </div>
    </div>

    <div class="overlay"></div>    
  </body>

CSS：

    .wrapper {position:relative; }
.overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1005; background: #000; opacity: .5;}
.content {position:absolute; z-index:2;}
header{position:absolute; z-index:15;}
.searchwrapper {position:absolute;}
section {z-index:1006; color:#fff;background:blue;}
.modal {width:100px; height:100px; background:#fff; position:absolute; right:0; top:40px; z-index:1010;}

Answer 1

使用所有z-index，您必须有一个明确的位置声明。

试试这个：

section {
    z-index: 1006;
    color: #fff;
    background: blue;
    position: relative;
}

Answer 2

.wrapper {position:relative;}
.overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1005;  background: #000; opacity: .5;}
.content {position:absolute;}
header{position:absolute;}
.searchwrapper {position:absolute;z-index:1006}
section {color:#fff;background:blue;}

你做的是对的..错误的你做的是..给它为section标签的父代替而不是子标签..你会得到它..

Answer 3

在-ve

中提供ur overlay的z-index

.overlay {

 z-index: -1;

}

或

增加包装器的z-index

.wrapper {
position: relative;
z-index: 999999;
}

z-index问题 - 将NESTED元素放在＆amp;在附着在身体上的模态覆盖物上方

3 个答案: