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