css - 在现有的 div 之上添加层

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 中。基本上，当用户拖动文件时，dropzone 区域需要显示在搜索结果的顶部。

有什么快速的方法可以实现这种分层输出吗？

Answer 1

将两个 div 都放在 position: absolute 和它们的 parent 放在 position: 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;
    }
}

代码笔:http://codepen.io/mbrillaud/pen/ZYgEBj