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

【问题标题】：How can I get overlapping divs with relative positions?如何获得具有相对位置的重叠 div？
【发布时间】：2012-11-23 16:55:26
【问题描述】：

我希望几个 div 并排放置在一行中，但也允许它们与前一个 div 重叠。

我想要得到的是一个带有特定长度事件的 div 的时间线。这些事件可以相互重叠。

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

【问题讨论】：

标签： css html layer css-position

【解决方案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(s) 的位置，只需设置容器的 top/left/right/bottom CSS 属性或使用 JavaScript（jQuery 或其他）修改属性。

它会让你的代码保持干净和可读。

【讨论】：

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

【解决方案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>

小提琴：http://jsfiddle.net/vZv5k/

另一种解决方案：

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

【讨论】：

当我阅读developer.mozilla.org/en-US/docs/CSS/position 时，一分钱掉了我不能使用绝对位置，因为整个页面将成为我的位置锚。但是当我将 position: relative 放入周围的 div （日班）时，我绝对可以相对于该 div 定位我的块。

【解决方案3】：

我找到了解决方案。对于任何了解 CSS 的人来说，这可能是非常明显的。

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

原来，我误解了绝对定位。它与固定不一样，但对我来说它看起来像那样。

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

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

快速解决方案

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

【讨论】：

是的，但是在这种情况下，您需要为.day 类设置width 和height。
看起来不错。您也可以使用负边距对吗？我的回答会有帮助吗？ jsfiddle.net/vZv5k
我想是的。看起来它可能会变得非常棘手，以补偿来的效果。绝对位置似乎更干净。
就我而言，我想要与父级高度相同的内部 div，然后设置top: 0; bottom: 0;。

【解决方案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;
}

【讨论】：