如何使用相对位置获取重叠的div？

Question

我希望几个div能够排列在一起形成一条线，但也允许它们重叠。

我的目标是创建一个时间轴，其中每个事件都用一个div表示，这些事件可以相互重叠。

我的想法是给每个div相同的顶部位置，递增的z-index和左侧位置（根据事件发生的时间）。稍后，我会通过鼠标悬停事件弹出单个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，并且绝对定位到页面的某个位置。

- TilmanBaumann

Answer 1

很简单。使用绝对定位创建一个内部的div，但该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的位置，只需设置容器的top/left/right/bottom CSS属性或使用JavaScript（jQuery或其他）修改属性即可。

这将使你的代码整洁易读。

- Mahendra Mustika Wijaya

---

这太完美了，谢谢。我想知道为什么几乎没有人能回答这个问题。 - Partha

但是这样做，您需要为包装div设置宽度和高度...它不会自动调整为子元素的宽度和高度。 - FireFuro99

Answer 2

使用负边距！

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

---

另一种解决方案：

给.day类添加width，height和position属性，并将其相对定位，同时保持内部的div绝对定位。

查看下面的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>

- Praveen Kumar Purushothaman

---

当我阅读 https://developer.mozilla.org/en-US/docs/CSS/position 时，我恍然大悟：不能使用绝对定位，因为整个页面会成为我的位置锚点。但是，当我在周围的 div（day 类）中加入 position: relative，我可以将我的块绝对定位到该 div 相对位置。 - TilmanBaumann

Answer 3

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

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

事实证明，我误解了绝对定位。它与固定定位不同，但在我看来却很相似。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 解释得很好。

绝对定位绝对地定位于下一个周围锚点。如果没有定义其他锚点，则默认为整个页面。 要使某物成为锚点，它需要是position:relative;。

快速解决方案

向day类添加position:relative;并在内部div中使用绝对定位。

- TilmanBaumann

---

是的，但在这种情况下，您需要为 .day 类设置 width 和 height。 - Praveen Kumar Purushothaman

看起来不错。你也可以使用负边距，对吧？我的回答有帮助吗？http://jsfiddle.net/vZv5k/ - Praveen Kumar Purushothaman

我想是这样。看起来补偿come效应可能会变得非常棘手。绝对位置似乎更加清晰。 - TilmanBaumann

在我的情况下，我想让内部div与父元素具有相同的高度，然后设置top: 0; bottom: 0;。 - João Paulo

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

- Benny Code