Css 如何获得具有相对位置的重叠div？

我希望几个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并绝对定位在页面中的某个位置。

使用负边距！ 以及HTML：

.day {position: relative; width: 500px; height: 500px;}

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</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>

---

我找到了解决方案。对于任何了解css的人来说，这可能是盲目的

我想我不能使用绝对定位，因为我的元素会飞出周围的div

结果，我误解了绝对定位。它和fixed不一样，但在我看来是这样的

解释得很好

绝对定位位置绝对指向下一个周围锚点。如果没有定义其他锚，则默认为整个页面。 要使某物成为锚，它需要定位：相对的

快速解决方案

---

添加位置：相对位置；对于day类，使用内部分区中的绝对定位。

和

top

属性，还可以移动相对定位的对象。在我的代码示例中，红色框与绿色框重叠，因为它是

z-index

。如果删除

z索引

，则绿色框位于顶部

HTML:

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

.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;
}

---

很简单。使用绝对定位制作内部div，但使用相对定位制作div：

.day {position: relative; width: 500px; height: 500px;}

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</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>

A.

您可以使用另一种方法，如负边距，但如果您想动态更改HTML，则不建议使用这种方法。例如，如果要移动内部div的位置，只需设置容器的top/left/right/bottom CSS属性，或者使用JavaScript（jQuery或其他）修改属性

---

它将使您的代码保持干净和可读。

当我阅读时，我无法使用绝对位置，因为整个页面将成为我位置的锚。但是，当我将position:relative放入周围的div（day类）中时，我完全可以相对于该div定位我的块。是的，但在这种情况下，需要为

.day

类设置

宽度
和
高度
。看起来不错。您也可以使用负边距，对吗？我的回答有用吗？我想是的。看起来，要补偿随之而来的影响可能会变得相当棘手。绝对位置看起来更干净。在我的例子中，我希望内部div与父级具有相同的高度，然后设置
top:0；底部：0。这太完美了，谢谢。我想知道为什么几乎没有人能回答这个问题