我希望将几个div放在彼此相邻的一行中，但也允许它们与前一个div重叠。
我想要的是一个带有div的时间轴，用于一定长度的事件。事件可以相互重叠。
我的想法是给每个div提供相同的顶部位置，增加的z指数和增加的左位置（根据事件的时间）。之后我会通过鼠标悬停事件弹出单个div，以显示重叠。
我所做的就是让每个div都放在下一个div之下。通过摆弄top属性，我可以让它们水平对齐，但我看不到模式。
<div class="day">
<div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
<div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
<div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
</div>
如果我使用绝对位置，元素会从周围的div中飞出，绝对位于页面的某个位置。
答案 0 :(得分：34)
这很简单。使用绝对定位创建内部div，但使用相对定位
<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
<div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
<div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>
您可以使用其他方法，例如负边距，但如果您想动态更改HTML，则不建议使用此方法。例如，如果要移动内部div的位置，只需设置容器的顶部/左侧/右侧/底部CSS属性，或使用JavaScript（jQuery或其他）修改属性。
它将使您的代码保持清洁和可读。
答案 1 :(得分：31)
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>
为.day班级width，height和position relative提供内部div {{1} } {ly} absolute编辑。
查看以下 CSS ：
positionHTML ：
.day {position: relative; width: 500px; height: 500px;}
答案 2 :(得分：9)
我找到了解决方案。对于任何了解css的人来说，这可能是显而易见的。
我以为我无法使用绝对定位，因为我的元素会飞出周围的div。
事实证明，我误解了绝对定位。它和固定不一样，但对我来说看起来就像那样。
https://developer.mozilla.org/en-US/docs/CSS/position解释得很清楚。
绝对定位绝对位于下一个周围的锚点。如果没有定义其他锚，则默认为整个页面。 要使某个东西成为锚，它需要是位置：相对;
快速解决方案
将 position：relative; 添加到日期类并在内部div中使用绝对定位。
答案 3 :(得分：4)
使用top属性，您还可以移动相对定位的对象。在我的代码示例中，红色框与绿色框重叠，因为它是z-index。如果您删除z-index，则绿色框位于顶部。
<强> HTML：
<div class="wrapper">
<div class="box one"></div>
<div class="box two"></div>
</div>
<强> CSS：
.wrapper {
width: 50px;
height: 50px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
position: relative;
}
.box.one {
background-color: red;
z-index: 2;
top: 0px;
}
.box.two {
background-color: green;
z-index: 1;
top: -50px;
}