Question

我有覆盖，另一个div必须出现在叠加层上，但它需要覆盖不透明度。

我的代码：

样式：

    #mymodal{
    width:400px; 
    padding-bottom:1px;
    background-color:#FFF;
    box-shadow:0 3px 7px rgba(0,0,0,.25);
    box-sizing:border-box;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    z-index: 620000;
    opacity:1;
    visibility:visible;
    }

   #blackoverlaynd{
   position: fixed; 
   left: 0px; 
   top: 0px; 
   width:100%; 
   height:100%; 
   z-index: 300000; 
   background-color: #000; 
   opacity:0.90; 
   cursor: pointer;
   }


    <div id="mymodal"></div>    
    <div id="blackoverlaynd"></div>

任何想法为什么会发生？

Answer 1

没有采用blackoverlaynd的不透明度，

您的问题是z-index仅适用于relative，absolute和fixed定位元素。将mymodal设置为position:relative即可完成设置。

Answer 2

这就是不透明度的表现。

您可以考虑以下标记：

<div class="modal">
    <div class="modal-background">
    </div>
    <div class="modal-content">
    </div>
</div>

CSS：

.modal-background {
    opacity: 0.9
}

模态框具有覆盖不透明度

2 个答案: