Question

我正在尝试构建一个页面教程的东西，其中div在页面上突出显示。我有一个模态对话框，通常显示在叠加层的顶部。但是，我想要做的是将模态对话框置于叠加层后面，但将该模态中的特定div放到前面。

如何让div显示在叠加层顶部？

CSS：

    .overlay 
     {  
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:1000;
        background-color:#000000;
        opacity:0.7;    
    }

    .modal
    {    
        position:absolute;
        top:300px;
        left:50%;
        z-index:999;
        overflow:auto;
        margin:-250px 0px 0px -280px;
        border:1px solid #999;
        background-color:#fff;
        border-radius:6px;
        -webkit-border-radius:6px;
        -moz-border-radius:6px;
        -webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);
        -moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);
        box-shadow:0 3px 7px rgba(0,0,0,0.3);
        background-clip:padding-box;
        padding:10px;
    }

    .highlight
    {
        z-index:1002;
        position:relative;
        background-color:#ffffff;
    }

.modal-contents
{
    height:100px;
    min-width:100px;
}



.section
{
    padding:5px;
}

HTML：

<body>
    <div class="overlay"></div>       
    <div class="modal">
        <h1>Modal Window</h1>
        <div class="modal-contents">
            <div class="section highlight">
                This div should be highlighted above the overlay!
            </div>
            <div class="section">
                This is section two
            </div>            
        </div>
    </div>       
</body>

Answer 1

删除所有z-index值和模态元素的白色背景 http://jsfiddle.net/TfSa5/

 .overlay 
 {  
position:fixed;
top:0;
left:0;
right:0;
bottom:0;

background-color:#000000;
opacity:0.7;    
}

.modal
{    
position:absolute;
top:300px;
left:50%;

overflow:auto;
margin:-250px 0px 0px -280px;
border:1px solid #999;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);
-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);
box-shadow:0 3px 7px rgba(0,0,0,0.3);
background-clip:padding-box;
padding:10px;
}

.modal-contents
{
height:100px;
min-width:100px;
}

.highlight
{
position:relative;
background-color:#ffffff;
}

.section
{
padding:5px;
}

Z-Index不处理具有位置的元素：当父元素的位置为相对时为相对：绝对

1 个答案: