如何在CSS中重叠两个div？

Question

我有两个 div 喜好，

<div class="imageDiv"></div>
<div class="imageDiv"></div>

和 css 类，

 .imageDiv
    {
        margin-left: 100px;
        background: #fff;
        display: block;
        width: 345px;
        height: 220px;
        padding: 10px;
        border-radius: 2px 2px 2px 2px;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

你可以在这里看到结果：Here :)

我想要重叠这两个 div 喜欢的，

- zey

---

你需要给它们不同的类名并移动一个。可以使用相对定位或CSS3 translate。 - btevfik

可能是重复问题：**CSS：使两个浮动元素重叠** - Siva Charan

是的，必须创建两个类作为 (.imgDivOne, .imgDivTwo) :) 你能给我一个例子吗？ - zey

Answer 1

将此添加到第二个

bottomDiv

中

并将其添加到CSS中。

 .bottomDiv{
       position:relative;
       bottom:150px;
       left:150px;
    }

http://jsfiddle.net/aw8RD/1/

- btevfik

Answer 2

点击此处查看演示，你需要为第二个div引入一个额外的类。

.overlap{
    top: -30px;
position: relative;
left: 30px;
}

- Raab

---

+1，我编辑了likes > top: -100px;position: relative;left: 150px; - zey

Answer 3

我编辑了你的 fiddle，你只需要给前面的元素添加z-index并相应地调整其位置。

- dinodsaurus

Answer 4

查看这个fiddle，如果你想移动重叠的 div，你需要将其位置设置为absolute，然后更改它的top和left值。

- Mi-Creativity

Answer 5

为什么不只使用一个div，然后使用伪元素::before或::after，并将伪元素的位置设置为绝对定位，然后设置top: 100px和left: 100px？

- Junaid Asghar