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

Question

我希望将几个div放在彼此相邻的一行中，但也允许它们与前一个div重叠。

我想要的是一个带有div的时间轴，用于一定长度的事件。事件可以相互重叠。

我的想法是给每个div相同的顶部位置，增加的z指数和增加的左位置（根据事件的时间）。稍后我会通过鼠标悬停事件弹出单个div，以显示重叠。

我所做的就是让每个div都放在下一个div之下。随着顶部属性的摆弄，我可以让它们水平对齐，但我没有看到模式。

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

Answer 1

这很简单。使用绝对定位创建一个内部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>

您可以使用其他方法，如负边距，但如果您想动态更改HTML，则不建议使用此方法。例如，如果要移动内部div的位置，只需设置容器的顶部/左侧/右侧/底部CSS属性，或使用JavaScript（jQuery或其他）修改属性。 它将保持您的代码清洁和可读。

Answer 2

Use Negative Margins!

<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>

Fiddle: http://jsfiddle.net/vZv5k/

---

Another Solution:

给.day类一个width，height和position它relatively，保持内部divs absolutely positioned。

看看下面的CSS：

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

和HTML：

<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>

Answer 3

我找到了解决方案。对于任何了解css的人来说，这可能是显而易见的。

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

事实证明，我误解了绝对定位。这与修复不一样，但对我而言看起来就像那样。

https://developer.mozilla.org/en-US/docs/CSS/position解释得很好。

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

快速解决方案

添加位置：相对;到日班并在内部div中使用绝对定位。

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