模态框内嵌套子div不可见问题求助（附代码示例）

嘿，我一眼就揪出问题所在啦——你的子div（.divz1）之所以看不见，完全是**z-index属性设置错误**导致的！

问题根源 #

你给父容器.ssmodal设置了z-index: 1，但子元素.divz1却写了z-index: -1。这里要敲个重点：当父元素有明确的z-index值时，子元素的z-index是在父元素的层级上下文里生效的。把子元素的z-index设为-1，相当于让它跑到父元素的下层，而父元素的背景色是#fefefe（纯白色），直接把子div完全盖住了，自然就看不到它的身影。

修复方案 #

只需要把子元素.divz1的z-index删掉，或者改成大于等于0的值就行，比如：

.divz1 {
 /* 删掉z-index: -1，或者改成z-index: 1之类的正值 */
 border:2px solid blue;
}

修复后的完整代码示例 #

.ssmodal {
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 left: 0;
 top: 0;
 /*width: 100%;*/
 /*height: 100%;*/
 /*margin: auto;*/
 /*overflow: auto;*/
 background-color: #fefefe; /* Fallback color */
 /*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 font-size: inherit;
 font-family: 'Mukta';
 border:2px solid red;
}
.divz1 {
 /* z-index: -1; 这行直接删掉即可 */
 border:2px solid blue;
}
P {
 border:2px solid green;
}

<div id="modal" class="ssmodal">
 <div id="divs1" class="divz1">
  <p>TESTINGGGGGGG</p>
 </div>
</div>

这样修改后，蓝色边框的子div就会正常显示，里面的绿色边框p标签也能清晰看到啦！

内容的提问来源于stack exchange，提问作者Kacper Kwapisz