如何使用 css 创建重叠的 div 元素？答案

【问题标题】：How to create overlapping div elements with css?如何使用 css 创建重叠的 div 元素？
【发布时间】：2014-06-12 16:47:50
【问题描述】：

我想创建一个大小为 1000x600 的 div 元素。在其中，我想创建几个大小为 50x50 的 div。我想让所有的小 div 左下角对齐。但是它们需要重叠，并且都在更大的 div 中彼此重叠的那个角落。然后我想控制 div 的位置，使它们独立于其他小 div，即它们都可以重叠。

当我尝试时，这些 div 只是堆叠在一起。如果我使用绝对位置，那么 div 将相对于整个页面并出现在大 div 之外，我需要它相对于更大的 div。

有人知道怎么做吗？

谢谢

【问题讨论】：

我提醒你一些代码会很高兴看到。（顺便说一句……我一个字都听不懂！:) 你能澄清一下你的想法吗？）
你试过给更大的 div position: relative 吗？这应该允许您在较小的 div 上使用绝对定位。
您是说左下角对齐，然后再对齐上角。非常混乱，您的最后一个问题将相对位置应用于更大的 div。

标签： jquery html css

【解决方案1】：

如果没有一些示例代码或至少是您想要实现的目标的绘图，很难说出您的要求。但是……

"如果我使用绝对位置，那么 div 相对于整个页面并出现在大 div 之外，我需要它相对于更大的 div"

您想在父容器（大 div）上设置 position: relative。然后带有position: absolute 的子元素将相对于大 div 定位。

【讨论】：

【解决方案2】：

演示 http://jsfiddle.net/LsL4p/

1.) 将 "position:relative" 添加到容器 div

2.) 将 "position:absolute;left:0;bottom:0" 添加到小 div。

.container{
        border:1px solid #333333;    
        position:relative;
        width:1000px;
        height:600px;
}
.small-div{
        border:1px solid red;   
        position:absolute;
        bottom:0;
        left:0;
        width:50px;
        height:50px;
}

【讨论】：