Edit Question - KnowledgeHub

Title Body

I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div. What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other. My idea was to give each div the same top position, an increasing z-index and an increasing left position (according to the time of the event). Later I would pop individual divs out by mouse-over events to visualise the overlap. What I do is to make it so each div gets placed under the next one. With fiddling of the top attribute I can get them to align horizontally, but I don't see the pattern. <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> If I use absolute positions, the elements fly out of the surrounding div and are positioned absolutely at some place in the page.

Tags (comma-separated) Cancel