如何与相对位置重叠div

Question

我希望将几个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,并且绝对位于页面的某个位置.

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 top/left/right/bottom或使用javascript修改(jquery或其他).

它会保持你的代码干净......

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>

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

另一种方案:

给.day类width,height和position它relativeLY,保持内div小号absoluteLY position版.

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