在现有 div 上添加图层答案

【问题标题】：add layer on top of an existing div在现有 div 上添加图层
【发布时间】：2015-06-18 21:01:57
【问题描述】：

我有一个动态填充内容的 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 区域需要显示在 searchresult 的顶部。

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

【问题讨论】：

你试过z-index吗？
是的，我之前尝试过：

没用。但是，如果我使用 z 索引，那么它不会完全覆盖搜索结果 div。不是吗？

标签： css dropzone.js

【解决方案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;
    }
}

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

【讨论】：