我想要几个div定位在每一行旁边,但也允许它们与之前的div重叠.
我想要得到的是一个时间线,具有一定长度的事件的div.事件可以重叠.
我的想法是给每个div同样的顶级位置,增加的z指数和增加的左侧位置(根据事件的时间),然后我将通过鼠标悬停事件弹出单独的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中飞出,并且绝对位于页面的某个位置.
解决方法
使用负边距！
<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类宽度,高度和相对位置,保持内部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>
