Question

我有一个div，其内容是动态填充的。基本上它显示一个列表

<div id="searchResult"></div>

我还有一个单独的div用于删除文件。我正在使用Dropzone上传文件

<div class="filesDropzone dz-clickable" id="filesDrop" style="width:97%;height:50px;"></div>

但是现在我需要将这个dropzone div包含在searchResult div中。基本上，当用户拖动文件时，需要在searchresult上显示dropzone区域。

有没有快速的方法来实现这种类型的分层输出？

Answer 1

将两个div放在位置：绝对和它们的父位置：relative，然后使用z-index来避免问题。

示例：

标记：

<div class="wrapper">
    <div class="content"></div>
    <div class="overlay"></div>
</div>

CSS（实际上是用于嵌套的SCSS，但它是相同的）

.wrapper{
    position: relative;

    & .content,
    & .overlay{
        position: absolute;
        top: 0;
        left: 0;
    }
    & .content{
        width: 200px;
        height: 200px;
        background-color: orange;
        z-index: 1;
    }
    & .overlay{
        width: 300px;
        height: 300px;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 2;
    }
}

Codepen：http://codepen.io/mbrillaud/pen/ZYgEBj

在现有div的顶部添加图层

1 个答案: